动态菜单栏的设置
璩无尘
设置动态菜单栏的重点在于 hover的使用上，
ul:hover{} // ul会显示出想要的效果，而并非所以父子元素都实现。
<style type="text/css">
ul{padding:0;margin: 0;}
#nav {line-height: 30px;list-style-type: none;}
#nav li {float: left;width:150px;text-align: center; background: #AAAAAA}
#nav li ul {line-height: 27px; list-style-type: none;list-style-position:inherit; text-align:left;left:-100em; width: 50px; position: absolute;}
#nav li ul li{float: left;width: 150px ;text-align: center; background: #E1E1E1}
#nav li:hover ul {left: 8px;}
a {text-decoration: none;color: #000000;}
</style>
<body>
<ul id="nav">
<li>模块一
<ul>
<li><a href="任务2 认识CSS的选择器.pdf" target="right">1.1</a></li><br/>
<li><a href="https://www.baidu.com/" target="right">1.2</a></li><br/>
<li><a href="1.4.html" target="right">1.3</a></li><br/>
<li><a href="1.5.html" target="right">1.4</a></li><br/>
<li><a href="1.6.html" target="right">1.5</a></li><br/>
<li><a href="1.7.html" target="right">1.6</a></li><br/>
<li><a href="1.8.html" target="right">1.7</a></li><br/>
<li><a href="1.9.html" target="right">1.8</a></li><br/>
<li><a href="1.10.html" target="right">1.9</a></li><br/>
<li><a href="1.11.html" target="right">1.10</a></li><br/>
</ul>
</li>
</ul>
</body>
类似资料：