css下拉二级菜单源码

下拉二级菜单是网页设计中很常见的功能，通过CSS可以非常方便地实现。下面是一个简单的示例代码：

HTML部分：

<ul class="menu">
    <li><a href="#">一级菜单1</a>
        <ul>
            <li><a href="#">二级菜单1</a></li>
            <li><a href="#">二级菜单2</a></li>
            <li><a href="#">二级菜单3</a></li>
        </ul>
    </li>
    <li><a href="#">一级菜单2</a>
        <ul>
            <li><a href="#">二级菜单4</a></li>
            <li><a href="#">二级菜单5</a></li>
            <li><a href="#">二级菜单6</a></li>
        </ul>
    </li>
</ul> 

CSS部分：

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li {
    float: left;
    position: relative;
    margin-right: 20px;
}
.menu li a {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #333;
}
.menu li ul {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
}
.menu li:hover ul {
    display: block;
}
.menu li ul li {
    float: none;
    margin: 0;
    padding: 0;
}
.menu li ul li a {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #333;
} 

通过上述示例代码，我们可以实现一个简单的下拉二级菜单。其中，HTML部分负责定义菜单的结构，CSS部分负责显示和样式。代码中的重点在于： - 利用display属性控制下拉菜单的显示和隐藏 - 利用position属性实现绝对定位，使得下拉菜单出现在相应一级菜单的下方 - 利用:hover伪类实现鼠标悬停效果 当然，这只是一个简单的例子，我们可以根据实际需求进行修改和优化。