<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#menu{
}
#menu li{
list-style:none;
float:left;
margin:0 0 0 1px;
background:#FFF;
padding:0px;
}
#menu li dl{
margin-top:1px;
padding:0;
}
#menu li dl a{
line-height:22px;
font-size:18px;
}
#menu li dl span{
margin:0px;
display:block;
height:10px;
background:url(top_left.gif) no-repeat top left;
}
#menu li dl span b{
display:block;
height:10px;
background:url(top_right.gif) no-repeat top right;
}
#menu li dl p{
margin:0px;
display:block;
height:10px;
background:url(bottom_left.gif) no-repeat bottom left;
}
#menu li dl p b{
display:block;
height:10px;
background:url(bottom_right.gif) no-repeat bottom right;
}
#menu li dl dt{
margin:0;
text-align:center;
}
#menu li dl dt a{
padding:0px 20px 0 20px;
display:block;
color:#000000;
text-decoration:none;
background:#FFCC66;
}
#menu li dl dd{
margin:0px;
text-align:center;
background:#333;
}
#menu li dl dd a{
font-size:14px;
padding:0px 5px 0px 15px;
background:url(arrow.gif) no-repeat 0px 3px;
color:#FFF;
text-decoration:none;
height:1em;/*IE6*/
}
#menu li dl dd{
display:none;
}
#menu li:hover dl dd,#menu li a:hover dl dd/*IE6*/{
display:block;
}
/*IE6*/
#menu li:hover,#menu li a,#menu li a:hover{
border:0px;
text-decoration:none;
}
#menu li dl dd a:hover{
background:url(arrow_hover.gif) no-repeat 0 3px;
color:#FF0000;
}
</style>
<body>
<ul id="menu">
<li>
<!--[if lte IE 6]><a href = "#nogo"><table><tr><td><![endif]-->
<dl>
<span><b></b></span>
<dt><a href="#">IE</a></dt>
<dd><a href="#">IE6.0</a></dd>
<dd><a href="#">IE7.0</a></dd>
<dd><a href="#">IE8.0</a></dd>
<dd><a href="#">IE9.0</a></dd>
<p><b></b></p>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href = "#nogo"><table><tr><td><![endif]-->
<dl>
<span><b></b></span>
<dt><a href="#">google chrome</a></dt>
<dd><a href="#">google chrome6.0</a></dd>
<dd><a href="#">google chrome7.0</a></dd>
<dd><a href="#">google chrome8.0</a></dd>
<dd><a href="#">google chrome9.0</a></dd>
<p><b></b></p>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href = "#nogo"><table><tr><td><![endif]-->
<dl>
<span><b></b></span>
<dt><a href="#">firefox</a></dt>
<dd><a href="#">firefox3.6</a></dd>
<dd><a href="#">firefox4.0</a></dd>
<p><b></b></p>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
纯CSS下拉菜单，宽度自适应
4星 · 超过85%的资源 需积分: 39 35 浏览量
2011-02-08
11:26:16
上传
评论
收藏 8KB RAR 举报 
CSS下拉菜单导航栏.rar （8个子文件） 
CSS下拉菜单导航栏 
arrow.gif 64B arrow_hover.gif 64B top_left.gif 166B top_right.gif 108B bottom_left.gif 167B
背景图.psd 31KB bottom_right.gif 106B
index.html 3KB
- 1
- 2
- 3
前往页