主页面:
<!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" />
<link rel="stylesheet" href="nav.css" type="text/css" />
</head>
<body>
<div id="navigation">
<ul>
<li class="logo">LOGO</li>
<li><a href="#">SSSSSS</a>
<ul>
<li><a href="#">SSSSSS</a></li>
<li><a href="#">SSSSSS</a></li>
<li><a href="#">SSSSSS</a></li>
</ul>
</li>
<li><a href="#">MMMMMM</a>
<ul>
<li><a href="#">MMMMMM</a></li>
<li><a href="#">MMMMMM</a></li>
</ul>
</li>
<li><a href="#">PPPPPPPPPPPP</a>
<ul>
<li><a href="#">PPPPPPPPPPPP</a></li>
<li><a href="#">PPPPPPPPPPPP</a></li>
<li><a href="#">PPPPPPPPPPPP</a></li>
<li><a href="#">PPPPPPPPPPPP</a></li>
</ul>
</li>
<li><a href="#">CCCCCCCC</a></li>
</ul>
<span id="logout"><a href="#">logout</a></span>
</div>
</body>
</html>
使用的CSS文件:
#navigation {
width:1000px;
padding:2px 8px 2px 8px;
margin:8px auto;
background:#3B5998;
height:60px;
font:20px/3em Helvetica, Arial, sans-serif;
}
#navigation *{
margin:0; padding:0;
}
#navigation .logo{
margin-right:30px;
}
#navigation ul li {
list-style:none;
float:left;
margin-right:20px;
position: relative ;
z-index:100;
}
#navigation ul li a {
font-size:13px;
width:100px;
display:block;
padding:0 8px;
background:#A0B4DC;
font-weight:700;
color:#0287CA;
text-decoration:none;
}
#navigation ul li a:hover {
background:none;
color:#fff;
text-decoration:underline;
}
#navigation ul li ul{
background-color: #88C366;
position: absolute;
width: 80px;
overflow:hidden;
display:none;
}
#navigation ul li:hover ul{
background-color: #88C366;
position: absolute;
width: 100px;
display:block;
}
#navigation ul li ul li{
border-bottom: 1px solid #BBB;
text-align: left;
width: 100%;
}
#navigation #logout{
font-size:12px;
float:right;
}