您的位置：首页 > Web前端 > CSS

DIV+CSS制作二级横向弹出菜单，略简单

2016-08-11 21:03 781 查看


没有使用JavaScript控制二级菜单的显示，结果如上图所示。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯DIV+CSS制作二级横向弹出菜单</title>
<style type="text/css">
.menu{
font-family:arial,sans-serif;
/*width:750px;这里的宽度设置并不是必须的*/
padding:0;
margin:50px;
}
.menu ul{
padding:0;
margin:0;
/*ul和ol、li都有list-style-type属性，*/
list-style-type:none;
}
.menu ul li{
/*float属性定义元素在哪个方向浮动，浮动元素会生成一个块级框。如果浮动非替换元素，则要
指明一个明确的宽度，否则会被尽可能的压缩。*/
float:left;
position:relative;
list-style-type:none;
}
.menu ul li a, .menu ul li a:visited{
/*display的值，none表示不被显示；block表示显示为块级元素，元素前后
有换行符；inline为默认值，内联元素，前后没有换行符……*/
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border-width:1px solid #fff;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
/*鼠标无动作时不显示*/
.menu ul li ul{
display:none;
}
/*当鼠标指向第一级li时，第二级ul的动作*/
.menu ul li:hover ul{
display:block;
position:absolute;
top:30px;
left:0;
width:105px;
}
.menu ul li:hover ul li a{
display:block;
background:#faeec7;
color:#000;
}
.menu ul li:hover ul li a:hover{
background:#dfc184;
color:#000;
}
/*clear属性定义了元素的哪边上不允许出现浮动元素。*/
.clear{
clear:both;
}
</style>

</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a class="hide" href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a class="hide" href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a class="hide" href="#">一级菜单</a></li>
<div class="clear"></div>
</ul>

</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航