html/css 设置二级菜单

首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。

二级菜单也就是在一级菜单中的li中再添加一个ul-li结构

<div class="test">
    <ul>
            <li>A</li>
                <li>B</li>
                <li>C
                    <ul>
                            <li>C1</li>
                            <li>C2</li>
                            <li>C3</li>
                    </ul>
            </li>
    </ul>
</div>

使用css代码设置样式

<style type="text/css">
        .test ul{
            list-style-type: none;
 
        }
 
        .test ul li{
 
            float:left;
 
            /*以下设置仅为方便查看效果*/
            width:50px;
            height:20px;
            border:1px solid black;
            text-align: center;
        }
 
        .test ul li ul{
            display: none;
        }
 
        .test li:hover ul{
            display:block;
        }
 
</style>

解释三个重要的css代码：

1.写出一个ul-li菜单时，它会默认垂直排列，而我们需要的是水平的菜单栏，所以需要设置li的浮动：float：left

2.当鼠标悬浮在有二级菜单的一级菜单选项时，才会出现二级菜单，所以在鼠标不悬浮的情况下，需要把二级隐藏起来display：none

3.最后，设置li :hover ul 这个意思是，当鼠标悬浮在li上时，li下的ul呈现状态，hover是悬浮的意思，在设置a标签样式时应该会接触过