创建纯 CSS 水平下拉菜单
需要一个时尚且与浏览器兼容的水平下拉菜单？这是一个指南，可以帮助您纯粹使用 CSS 来实现它。
1. HTML 结构
创建嵌套的
<ul>表示菜单层次结构的结构：<ul>
2. CSS 样式
添加 CSS 规则来设计菜单样式并控制其行为：
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;
}查看实际操作
访问下面的demo来体验纯CSS下拉菜单：
http://jsfiddle.net/XPE3w/7/
以上是如何创建纯CSS水平下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！
