css鼠标悬浮下拉菜单效果
分类：实例代码
css鼠标悬浮下拉菜单效果属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了鼠标悬浮出现二级下拉菜单效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
.menu-bar {
margin:100px;
}
.menu-bar ul {
list-style-type:none;
}
.menu-bar a {
text-decoration: none;
color: black;
font-size: 12px;
font-family: "宋体";
}
.btn {
width: 50px;
height: 28px;
line-height: 28px;
text-align: center;
border: 1px solid #ddd;
background-color: #eee;
display: block;
}
.menu {
width: 82px;
height: 125px;
padding-top: 1px;
display: none;
}
.btn:hover + .menu, .menu:hover {
display: block;
}
/* 显示下拉菜单 */
.menu-item {
width: 80px;
height: 30px;
line-height: 30px;
padding: 0 10px;
background-color: white;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
cursor: pointer;
}
.menu-item:first-child {
border-top: 1px solid #ddd;
}
.menu-item:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="menu-bar">
<a class="btn" href="#">前端教程网</a>
<ul class="menu">
<li class="menu-item">css教程</li>
<li class="menu-item">div教程</li>
<li class="menu-item">js教程</li>
<li class="menu-item">pipipi.net</li>
</ul>
</div>
</body>
</html>
css鼠标悬浮下拉菜单效果，这样的场景在实际项目中还是用的比较多的，关于css鼠标悬浮下拉菜单效果就介绍到这了。