|
当网站设计师做网站导航的时候，常常会使用到下拉式菜单，我在这篇文章里主要是介绍纯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;
}
|
|
|
