您的位置：首页 > 其它

一个简单的导航栏菜单实现

2016-04-21 10:08 471 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.db {
background-color: #2c5fa0;
font-size: larger;
color: #ffffff;
width: 110px;
height: 40px;
line-height: 40px;
cursor: pointer;
}

.menu ul {
list-style: none; /* 去掉ul前面的符号 */
margin: 0px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width: auto; /* 宽度根据元素内容调整 */
}

.menu ul li {
float: left;
position: relative;
width: auto;
}

.menu ul li:hover .db {
background-color: #0528a0;
}

.menu ul li ul {
visibility: hidden;
position: absolute;
z-index: 9999; /* 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 */
width: auto;
}

.menu ul li ul li {
font-size: large;
text-align: center;
vertical-align: middle;
background: #0528a0;
width: auto;
min-width: 180px;
border-bottom: 0px solid white;
white-space: nowrap;
height: 40px;
line-height: 40px;
}

.menu ul li ul li:hover {
background-color: #2c5fa0;
}

.menu ul li ul li a {
display: block;
color: #ffffff;
text-decoration: none;
font-weight: 500;
width: auto;
}

.menu ul li:hover ul {
visibility: visible;
display: block;
}

.menu ul li:hover ul li a:hover {
font-size: 20px;
}
</style>
</head>
<body>
<div class="menu" style="margin-left: auto; margin-right: auto; text-align: center;">
<ul>
<li>
<div class="db" onclick="alert('AAA'); ">AAA</div>
</li>
<li>
<div class="db">BBB</div>
<ul>
<li><a href='#' onclick="alert(111);">BBB111</a> </li>
</ul>
</li>
<li>
<div class="db">CCC</div>
<ul>
<li><a href='#' onclick="alert(222);">CCC222</a> </li>
</ul>
</li>
</ul>
</div>
</body>
</html>

具体效果

AAA

BBB

BBB111

CCC

CCC222

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航