谈谈网站导航 CSS二级下拉菜单(能与IE6兼容)

网站设计师做网站导航的时候,常常会使用下拉菜单,我在这篇文章主要介绍CSS制作的下拉菜单,除了能兼容各主流浏览器外,还可以兼容IE6。

主要思路,是在默认状态下,设置display为none,让子菜单隐藏起来,CSS2.0手册中解释说明了与visibility属性的hidden值不同在于display属性none值不为被隐藏的对象保持留住其物理的空间。在鼠标滑过后,把display属性设置为block子菜单显示。

在这个当中,遇到的最大问题在于IE6中的”:hover”伪类只对a标记有效,在这里,如果要解决IE6兼容,办法是在dl列表项外增加一个a元素,并将dl放置在一个单元格之中。

HTML部分
<ul class="menu">
<li>首页</li>
<li>
<a href="#">
<table><tr><td>
<dl>
<dt><a href="#">产品服务</a></dt>
<dd><a href="#">综合产品</a></dd>
<dd><a href="#">分类产品</a></dd>
</dl>
</td></tr></table>
</a>
</li>
</ul>

CSS部分
/*常规设置,下拉菜单中不需要外补丁、内补丁,如果实际需要再设置,超链接也不需要下划线*/
ul, li{
margin:0;
padding:0;
list-style-type:none;
}
a{
text-decoration:none;
}
/*对每一个li进行设置*/
.menu li{
float:left; /*使菜单向左浮动,横向排列*/
width:150px; /*li宽度*/
}
/*设置菜单项*/
.menu li dl{
margin:0;
padding:0;
width:150px; /*菜单项宽度*/
}
/*设置菜单项的dt*/
.menu li dt{
margin:0;
padding:5px;
text-align:center; /*文字居中*/
background:#5d316b; /*设置主菜单的背景色*/
}
/*设置菜单项的dd*/
.menu li dd{
display:none; /*使子菜单不可见*/
margin:0;
padding:5px; /*子菜单上下两项间隔*/
text-align:center; /*文字居中*/
background:#c5a0d2; /*子菜单背景色*/
}
/*设置主菜单项链接样式 */
.menu li dt a, .menu li dt a:visited{
display:block; /*主菜单项设置为块级元素*/
color:#fff; /*默认文字颜色为白色*/
}
/*设置子菜单连接样式*/
.menu li dd a, .menu li dd a:visited{
display:block; /*子菜单项设置为块级元素*/
color:#fff; /*默认文字颜色为白色*/
}
/*设置鼠标响应*/
.menu li:hover dd, .menu li a:hover dd{ /*此句前半部分适合在Firefox或IE7中实现,IE6中的”:hover”伪类只对a标记有效*/
display:block;
}
/*设置在鼠标经过子菜单项时的样式*/
.menu li dd a:hover{
color:#80478c;
}
.menu li:hover, .menu li a:hover{ /*兼容IE6*/
/*ie6*/
border:0;
}

分类目录: 建站教程 | 标签: 谈谈  网站  导航  CSS二级  下拉  菜单  IE6兼容   | 评论:0
上一篇: 制作手机网页的心得
下一篇: 如何进行小型分页的设计