简单的水平导航菜单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>简单的水平导航菜单</title>
<style>
#menu{
margin: 0;
padding: 0;
width: 610px;
list-style-type: none;
font: 14px Arial;
}
#menu li{
float: left;
width: 150px;
padding: 0;
margin: 0 1px 0 0;
}
#menu li dl{
margin: 0;
padding: 0 0 10px 0;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
}
#menu li dt{
margin: 0;
padding: 5px;
text-align: center;
border-bottom: 1px solid #b00;
background: #ed8 url(images/top.gif) no-repeat top left;
}
#menu li dt a{
display: block;
color: #333;
text-decoration: none;
}
#menu li dt a:visted{
display: block;
color: #333;
text-decoration: none;
}
#menu li dd{
margin: 0;
padding: 0;
color: #fff;
background: #47a;
}
#menu li dd.last{
border-bottom: 1px solid #b00;
}
#menu li dd a{
display: block;
color: #fff;
text-decoration: none;
padding: 4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
}
#menu li dd{
display: none;
}
#menu li:hover dd{
display:block;
}
#menu li dd a:hover{
background: #147;
color: #9cf;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<dl>
<dt><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
</li>
<li>
<dl>
<dt><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
</li>
</ul>
</body>
</html>
多彩的水平导航菜单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>多彩的水平导航菜单</title>
<style>
#menu{
margin: 0;
padding: 0;
width: 610px;
list-style-type: none;
font: 14px Arial;
}
#menu li{
float: left;
width: 150px;
padding: 0;
margin: 0 1px 0 0;
}
#menu li dl{
margin: 0;
padding: 0 0 10px 0;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
}
#menu li dt{
margin: 0;
padding: 5px;
text-align: center;
border-bottom: 1px solid #b00;
}
#menu li dt a{
display: block;
color: #333;
text-decoration: none;
}
#menu li dt a:visted{
display: block;
color: #333;
text-decoration: none;
}
#menu li dd{
margin: 0;
padding: 0;
color: #fff;
background: #47a;
}
#menu li dd.last{
border-bottom: 1px solid #b00;
}
#menu li dd a{
display: block;
color: #fff;
text-decoration: none;
padding: 4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
}
#menu li dd{
display: none;
}
#menu li:hover dd{
display:block;
}
#menu li dd a:hover{
background: #147;
color: #9cf;
}
#menu li dt.orange{
background: #fa5 url(images/top.gif) no-repeat top left;
}
#menu li dt.yellow{
background: #ee5 url(images/top.gif) no-repeat top left;
}
#menu li dt.green{
background: #5e5 url(images/top.gif) no-repeat top left;
}
#menu li dt.blue{
background: #5cf url(images/top.gif) no-repeat top left;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<dl>
<dt class="orange"><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="yellow"><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="green"><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="blue"><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
</li>
</ul>
</body>
</html>
兼容IE6的多彩的水平导航菜单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>兼容IE6的多彩的水平导航菜单</title>
<style>
#menu{
margin: 0;
padding: 0;
width: 610px;
list-style-type: none;
font: 14px Arial;
}
#menu li{
float: left;
width: 150px;
padding: 0;
margin: 0 1px 0 0;
}
#menu li dl{
width: 150px;
margin: 0;
padding: 0 0 10px 0;
background: #cb6 url(images/bottom.gif) no-repeat bottom left;
}
#menu li dt{
margin: 0;
padding: 5px;
text-align: center;
border-bottom: 1px solid #b00;
}
#menu li dt a{
display: block;
color: #333;
text-decoration: none;
}
#menu li dt a:visted{
display: block;
color: #333;
text-decoration: none;
}
#menu li dd{
margin: 0;
padding: 0;
color: #fff;
background: #47a;
}
#menu li dd.last{
border-bottom: 1px solid #b00;
}
#menu li dd a{
height: 1em;
display: block;
color: #fff;
text-decoration: none;
padding: 4px 5px 4px 20px;
background: #47a url(images/arrow.gif) no-repeat 10px 10px;
}
#menu li dd{
display: none;
}
#menu li:hover dd{
display:block;
}
#menu li a:hover dd{
display:block;
}
#menu li:hover{
border: 0;
}
#menu li a:hover{
border: 0;
}
#menu li dd a:hover{
background: #147;
color: #9cf;
}
#menu li dt.orange{
background: #fa5 url(images/top.gif) no-repeat top left;
}
#menu li dt.yellow{
background: #ee5 url(images/top.gif) no-repeat top left;
}
#menu li dt.green{
background: #5e5 url(images/top.gif) no-repeat top left;
}
#menu li dt.blue{
background: #5cf url(images/top.gif) no-repeat top left;
}
#menu table{
border-collapse: collapse;
padding: 0;
margin: -1px;
font-size: 1em;
}
#menu li a[href='#nogo']{
text-decoration: none;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="orange"><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="yellow"><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="green"><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt class="blue"><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
图片在对应相册中。
![](https://img-my.csdn.net/uploads/201212/04/1354631467_4730.gif)
![](https://img-my.csdn.net/uploads/201212/04/1354631491_2980.gif)
![](https://img-my.csdn.net/uploads/201212/04/1354631501_5069.gif)