html+css ---二级菜单

二级菜单实现

分类

1. 没用定位
2. 用了定位
3. 二级菜单压边线效果

思路

a标签还有ul全部放在div里面

a标签的宽高和div的宽高一致 然后就把ul挤出来

一开始给ul display:none;

div :hover ul{ display:block};

<!--结构-->
<div class="sm">    <!--  second menu  -->
    <a href="#"></a>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

/*样 式 ----第一种和第二种结合 */
.sm{
    height:20px;
    width:50px;
    /* position:relative; */
}
.sm a{
    display:block;
    height:20px;
    width:50px;
    line-height:20px;
}
.sm ul{
    width:200px;
    height:500px;
    display:none;
    /* position:absolute */
.sm:hover>ul{
    display:block;    
    }
}