html简易高效下拉菜单

css部分

<style>
    p{
        padding: 0;
        margin: 0;
    }
    .first{
        width: 200px;
        height: 35px;
        background: paleturquoise;
        color: red;
        text-align: center;
        line-height: 35px;
        /* position: relative; */
    }

    .second{
        width: 200px;
        height: 105px;
        background: paleturquoise;
        color: red;
        text-align: center;
        line-height: 35px;
        display: none;   
        /* position: absolute; */
    }

    .first:hover .second{
        display: block;
    }
</style>

重点就是display的none与block的转换

html部分

<div class="first">
    <p>鼠标指向下拉</p>
    <div class="second">
        <P>第一个</P>
        <P>第二个</P>
        <P>第三个</P>
    </div>
</div>

div和p都可以改成其他标签，改变时注意一下细节就行。