用css制作导航
一个不错的用纯css导航，记录在这里：
0--完整的html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<head>
<title>演示导航布局</title>
<link rel="stylesheet" type="text/css" href="../css/mycss.css">
</head>
<body>
<center>
下面是导航演示
<div id="nav">
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Products</a>
<ul>
<li><a href="">product1</a></li>
<li><a href="">product2</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Online</a></li>
<li><a href="">Right Here</a></li>
<li><a href="">Somewhere</a></li>
</ul>
</li>
</ul>
</div>
<style type="text/css">
/*用css实现导航 */
#nav ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul { display: none; }
#nav ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
#nav ul li a:hover { background: #617F8A; }
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 11px;
}
#nav li:hover a { background: #617F8A; }
#nav li:hover li a:hover { background: #95A9B1; }
</style>
</center>
</body>
</html>
--1/html代码：
1 <ul id="menu"> 2 <li><a href="">Home</a></li> 3 <li><a href="">About Us</a> 4 <ul> 5 <li><a href="">The Team</a></li> 6 <li><a href="">History</a></li> 7 <li><a href="">Vision</a></li> 8 </ul> 9 </li> 10 <li><a href="">Products</a> 11 <ul> 12 <li><a href="">product1</a></li> 13 <li><a href="">product2</a></li> 14 <li><a href="">product3</a></li> 15 <li><a href="">product4</a></li> 16 <li><a href="">product1</a></li> 17 </ul> 18 </li> 19 <li><a href="">Contact</a> 20 <ul> 21 <li><a href="">Online</a></li> 22 <li><a href="">Right Here</a></li> 23 <li><a href="">Somewhere Else</a></li> 24 </ul> 25 </li> 26 </ul>
2/css代码
1 ul { 2 font-family: Arial, Verdana; 3 font-size: 14px; 4 margin: 0; 5 padding: 0; 6 list-style: none; 7 } 8 ul li { 9 display: block; 10 position: relative; 11 float: left; 12 } 13 li ul { display: none; } 14 ul li a { 15 display: block; 16 text-decoration: none; 17 color: #ffffff; 18 border-top: 1px solid #ffffff; 19 padding: 5px 15px 5px 15px; 20 background: #2C5463; 21 margin-left: 1px; 22 white-space: nowrap; 23 } 24 ul li a:hover { background: #617F8A; } 25 li:hover ul { 26 display: block; 27 position: absolute; 28 } 29 li:hover li { 30 float: none; 31 font-size: 11px; 32 } 33 li:hover a { background: #617F8A; } 34 li:hover li a:hover { background: #95A9B1; }
--效果图：
