暖色调的CSS下拉菜单，可支持二级

时间：2014-06-11 08:21 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级下拉导航菜单</title>
<style type="text/css">
.menu {
font-family: arial, sans-serif; 
width:750px; 
margin:0; 
margin:50px 0;
}
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
.menu ul li {
float:left; 
position:relative;
}

.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:center; 
text-decoration:none; 
width:104px; 
height:30px; 
color:#000; 
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7; 
line-height:30px; 
font-size:11px;
}

.menu ul li ul {
display: none;
}

.menu ul li:hover a {
color:#fff; 
background:#b3ab79;
}

.menu ul li:hover ul {
display:block; 
position:absolute; 
top:31px; 
left:0; 
width:105px;
}

.menu ul li:hover ul li a {
display:block; 
background:#faeec7; 
color:#000;
}

.menu ul li:hover ul li a:hover {
background:#dfc184; 
color:#000;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
table {
border-collapse:collapse;
margin:0; 
padding:0;
}

.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover {
color:#fff; 
background:#b3ab79;
}
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:32px; 
left:0; 
width:105px;
}
.menu ul li a:hover ul li a {
background:#faeec7; 
color:#000;
}

.menu ul li a:hover ul li a:hover {
background:#dfc184; 
color:#000;
}
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="#">DEMOS</a>

<ul>
<li><a href="#" title="The zero dollar 
ads page">zero dollars</a></li>
<li><a href="#" title="Styling forms">styled 
form</a></li>
<li><a href="#" title="Removing active/focus 
borders">active focus</a></li>
<li><a href="#" title="em size images 
compared">em sized images</a></li>
</ul>

</li>
<li><a class="hide" href="#">MENUS</a>

<ul>
<li><a href="#" title="a coded list of spies">spies 
menu</a></li>
<li><a href="#" title="a horizontal vertical 
menu">vertical menu</a></li>
<li><a href="#" title="circular links">circular 
links</a></li>
</ul>

</li>
<li><a class="hide" href="#">LAYOUTS</a>

<ul>
<li><a href="#" title="Cross browser 
fixed layout">Fixed 1</a></li>
<li><a href="#" title="A simple minimum 
width layout">minimum width</a></li>
</ul>

</li>
<li><a class="hide" href="#">BOXES</a>

<ul>
<li><a href="#" title="a coded list of spies">spies 
menu</a></li>
<li><a href="#" title="circular links">circular 
links</a></li>
</ul>

</li>
<li><a class="hide" href="#">MOZILLA</a>

<ul>
<li><a href="#" title="A drop down 
menu">drop down menu</a></li>
<li><a href="#" title="Shadow 
text">shadow text</a></li>
</ul>

</li>
<li><a class="hide" href="#">EXPLORER</a>

<ul>
<li><a href="#" title="Weft fonts">weft 
fonts</a></li>
<li><a href="#" title="Vertical 
align">vertical align</a></li>
</ul>

</li>
<li><a class="hide" href="#">OPACITY</a>

<ul>
<li><a href="#" title="colour 
wheel">opaque colours</a></li>
<li><a href="/" title="a menu using opacity">opaque menu</a></li>
</ul>

</li>
</ul>

<div class="clear"> </div>
</div>
</body>
</html>

暖色调的CSS下拉菜单，可支持二级

网页特效