-----------------------------------------------html---------------------------------------------
<!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>css下拉菜单</title>
<!--[if IE 7]><!--><link rel="stylesheet" type="text/css" href="test.css" /><!--<![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="Welcome.css" /><![endif]-->
</head>
<body>
<ul id="navigation">
<li>
<a href="#">栏目1
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#">栏目1-->菜单1</a></li>
<li><a href="#">栏目1-->菜单2</a></li>
<li><a href="#">栏目1-->菜单3</a></li>
<li><a href="#">栏目1-->菜单4</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li>
<a href="#">栏目2<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#">栏目2-->菜单1</a></li>
<li><a href="#">栏目2-->菜单2</a></li>
<li><a href="#">栏目2-->菜单3</a></li>
<li><a href="#">栏目2-->菜单4</a></li>
<li><a href="#">栏目2-->菜单5</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li>
<a href="#">栏目3<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#">栏目3-->菜单1</a></li>
<li><a href="#">栏目3-->菜单2</a></li>
<li><a href="#">栏目3-->菜单3</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</body>
</html>
----------------------------------------------------css-----------------------------------------
/*body内容样式*/
body {
/*控制字体样式*/
font-family:verdana, sans-serif;
/*控制字体大小*/
font-size:small;
}
/*id为navigation的li和ul的样式*/
#navigation , #navigation li ul{
/*所有的填充*/
padding:0;
/*不、不白外边像素*/
margin:0;
/*list排列、style样式、type类型*/
list-style-type: none;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
/*连接的样式和背景颜色*/
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:90px;
height:22px;
line-height:22px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
/**/
#navigation li ul{
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
}
/* 以下针对IE6 */
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li a:hover ul {
display:block;
position:absolute;
top:22px;
margin-top:1px;
left:0;
width:120px;
}
#navigation li a:hover ul li a {
display:block;
background:#c5dbf2;
color:#000;
height:20px;
line-height:20px;
padding:5px 10px;
width:110px;
}
#navigation li a:hover ul li a:hover {
color:#fff;
background:#6b839c;
}
<!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>css下拉菜单</title>
<!--[if IE 7]><!--><link rel="stylesheet" type="text/css" href="test.css" /><!--<![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="Welcome.css" /><![endif]-->
</head>
<body>
<ul id="navigation">
<li>
<a href="#">栏目1
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#">栏目1-->菜单1</a></li>
<li><a href="#">栏目1-->菜单2</a></li>
<li><a href="#">栏目1-->菜单3</a></li>
<li><a href="#">栏目1-->菜单4</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li>
<a href="#">栏目2<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#">栏目2-->菜单1</a></li>
<li><a href="#">栏目2-->菜单2</a></li>
<li><a href="#">栏目2-->菜单3</a></li>
<li><a href="#">栏目2-->菜单4</a></li>
<li><a href="#">栏目2-->菜单5</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li>
<a href="#">栏目3<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#">栏目3-->菜单1</a></li>
<li><a href="#">栏目3-->菜单2</a></li>
<li><a href="#">栏目3-->菜单3</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</ul>
</body>
</html>
----------------------------------------------------css-----------------------------------------
/*body内容样式*/
body {
/*控制字体样式*/
font-family:verdana, sans-serif;
/*控制字体大小*/
font-size:small;
}
/*id为navigation的li和ul的样式*/
#navigation , #navigation li ul{
/*所有的填充*/
padding:0;
/*不、不白外边像素*/
margin:0;
/*list排列、style样式、type类型*/
list-style-type: none;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
/*连接的样式和背景颜色*/
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:90px;
height:22px;
line-height:22px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
/**/
#navigation li ul{
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
}
/* 以下针对IE6 */
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li a:hover ul {
display:block;
position:absolute;
top:22px;
margin-top:1px;
left:0;
width:120px;
}
#navigation li a:hover ul li a {
display:block;
background:#c5dbf2;
color:#000;
height:20px;
line-height:20px;
padding:5px 10px;
width:110px;
}
#navigation li a:hover ul li a:hover {
color:#fff;
background:#6b839c;
}
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货