css 左侧下拉菜单

CSS中实现左侧下拉菜单是一项很有用的技能。下面介绍一下如何使用CSS实现左侧下拉菜单。

ul class="menu">
    li>
    菜单1ul class="dropdown">
    li>
    a href="#">
    选项1/a>
    /li>
    li>
    a href="#">
    选项2/a>
    /li>
    li>
    a href="#">
    选项3/a>
    /li>
    /ul>
    /li>
    li>
    菜单2/li>
    /ul>
//CSS代码.menu {
    list-style: none;
}
    .menu >
li {
    padding: 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    position: relative;
}
    .menu >
li:hover {
    background-color: #ccc;
}
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.dropdown li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.dropdown li:hover {
    background-color: #ccc;
}
    .menu >
li:hover .dropdown {
    display: block;
}
    

以上代码会创建一个左侧下拉菜单。当鼠标移动到一个菜单项时，下拉菜单会显示出来。可以用这种方式实现任何数量的下拉菜单。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！