网上可以找到不同形式的下拉菜单,它们大多涉及或完全依赖JavaScript。我想要表现另外一种我个人认为很酷的形式,因为它是容易使用的特点仅用HTML、CSS。
文章中例子将呈现一简单带有鼠标经过显示子菜单的水平菜单。
让我开始向你介绍菜单的HTML代码。被用嵌套的列表构建以便显示HTML源代码没有CSS样式呈现有用的结构。
<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适用于你的网页布局。
转自:https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/