本文介绍了一个使用纯CSS实现的简单导航菜单，包括下拉菜单功能。通过浮动和绝对定位，结合伪类:hover，实现了菜单项的悬停显示子菜单效果。
一个纯css简单的导航菜单，效果如下：
全部代码如下（复制另存为html文件即可）：
<html>
<head>
<style>
body {
position: relative;
}
.nav {
background-color: #4bafbe;
height: 36px;
}
.menu {
position: absolute;
right: 0;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu > li {
float: left;
}
.menu li a {
width: 100px;
height: 36px;
line-height: 36px;
display: block;
color: white;
text-align: center;
cursor: pointer;
}
.menu li ul {
display: none;
margin-top: 1px;
background-color: #4bafbe;
}
.menu > li:hover ul {
display: block;
}
.menu a:hover {
background-color: #188f8e;
}
</style>
</head>
<body>
<div class="nav">
<ul class='menu'>
<li>
<a>文件</a>
<ul>
<li><a>打开</a></li>
<li><a>保存</a></li>
<li><a>退出</a></li>
</ul>
</li>
<li>
<a>编辑</a>
<ul>
<li><a>查找</a></li>
<li><a>替换</a></li>
<li><a>搜索</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
