关于二级菜单

这个二级菜单要实现的效果是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix:after{
content: '.';
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
.nav{
position: relative;
margin-left: 10px;
}
.nav a{
display: block;
padding: 0 10px;
width: 80px;
line-height: 40px;
text-align: center;
cursor: pointer;
color: white;
}
.nav li{
float: left;
}
.nav>li{
background: rgb(18, 104, 191);
border-right: 1px solid #fff;
}
.nav ul{
display: none;
background: #ccc;
position: absolute;
top: 40px;
}
.nav ul li a{
color: #000;
}
.nav li:hover {
background: rgba(18, 104, 191, 0.8);
}
.parent:hover ul{
display: block;
}
</style>
</head>
<body>
<ul class="nav clearfix">
<li>
<a href="">首页</a>
</li>
<li>
<a href="">贷款资助</a>
</li>
<li class="parent">
<a>思想教育>></a>
<ul class="clearfix">
<li>
<a href="">政治解读</a>
</li>
<li>
<a href="">政治解读</a>
</li>
</ul>
</li>
<li class="parent">
<a>队伍建设>></a>
<ul class="clearfix">
<li>
<a href="">政治解读</a>
</li>
<li>
<a href="">政治解读</a>
</li>
<li>
<a href="">政治解读</a>
</li>
<li>
<a href="">政治解读</a>
</li>
</ul>
</li>
<li>
<a href="">学风建设</a>
</li>
<li>
<a href="">校园服务</a>
</li>
<li>
<a href="">下载中心</a>
</li>
<li>
<a href="">金石滩</a>
</li>
</ul>
</body>
</html>
题目看起来是一个比较简单的效果实际上问题还是存在的。
 
总结一哈：
实现横向导航条，水平排列有两种方法。一种是float:left，一种是display:inline-block。优点是：都能实现该效果。
缺点是：都有兼容问题。
清楚浮动的两种方法是”
//第一种02..clearfix:after{
content: '.';
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
 
//第二种
.clearfix{
overflow:hidden;
zoom:1;
}
第二种有些缺点：比如现在就不能用，因为子菜单需要通过定位溢出父元素，overflow:hidden;的话导致溢出不显示。所以还是选择用第一种。
posted @ 2014-08-31 21:37 小石头的梦想阅读(132) 评论(0) 收藏举报
刷新页面返回顶部
关于二级菜单

公告
