下拉菜单
浏览网页的时候我们可以看到不同的下拉菜单的解决方案,其中大部分或全部依赖于JavaScript来实现的。我想提出另一种选择,我个人觉得真的很酷,因为它很容易使用,直接利用HTML和CSS标准的功能,而不使用任何怪异的解决方法。
这个例子中将会实现一个水平菜单,当你的鼠标滑过的时候它会显示子菜单。
它的结构是嵌套的列表,即使没有任何CSS样式,HTML将显示一个有用的结构。
HTML代码为
<ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href="">The Team</a></li> <li><a href="">History</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Products</a> <ul> <li><a href="">Cozy Couch</a></li> <li><a href="">Great Table</a></li> <li><a href="">Small Chair</a></li> <li><a href="">Shiny Shelf</a></li> <li><a href="">Invisible Nothing</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere Else</a></li> </ul> </li> </ul>
下面将添加CSS让网页更加的炫,这里我们将使用:hover来操作子菜单的显示及隐藏。
ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #617F8A; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; }
完成了,现在你可以根据你的网页布局修改CSS并把它跑起来,希望能对大家有帮助。:-)