CSS导航栏下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu >ul>li{
float: left;
}
.menu>ul>li>ul{
display: none; /*关键设置 隐藏二级列表*/
}
.menu>ul>li:hover ul{
display: block; /*关键设置 显示二级列表*/
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>主菜单1
<ul>
<li>01分级菜单</li>
<li>02分级菜单</li>
<li>03分级菜单</li>
</ul>
</li>
<li>主菜单2
<ul>
<li>21分级菜单</li>
<li>22分级菜单</li>
<li>23分级菜单</li>
</ul>
</li>
<li>主菜单3
<ul>
<li>31分级菜单</li>
<li>32分级菜单</li>
<li>33分级菜单</li>
</ul>
</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
</html>
