#container{
width: 1024px;
margin: 0 auto;
}
#banner{
height: 100px;
background-image: url("imgs/banner.png");
background-size: 100%;
}
#nav{
list-style: none;
height: 30px;
margin: 0;
padding: 0;
border-bottom: 2px solid #2788da;
}
#nav li{
float: left;
}
#nav li a{
display: block;
width: 168px;
margin-left: 2px;
text-align: center;
text-decoration: none;
color: #000;
height: 26px;
padding-top: 4px;
background-color: #ececec;
}
#nav li a:hover{
color: #ffffff;
background-color: #cccccc;
}
#category{
float: left;
}
#lnav{
list-style:none;
margin: 0;
padding: 0;
width: 120px;
}
.menu1{
display: block;
height: 24px;
padding: 2px 0 0 4px;
font-size: 16px;
background-color: #cccccc;
}
#lnav li{
}
#lnav li a{
display: block;
padding-left: 4px;
text-decoration: none;
font-size: 14px;
color: #000000;
background-color: #ececec;
margin:1px 0;
}
#lnav li a:hover{
color: #ffffff;
background: #cccccc;
}
#primary{
margin-left: 124px;
padding: 2px;
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>nav 3</title>
<link rel="stylesheet" href="nav3.css"/>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="header">
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">参 考</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">联 系</a></li>
</ul>
</div>
<div id="main">
<div id="category">
<ul id="lnav">
<li class="menu1">CSS</li>
<li><a href="#">CSS 入门</a></li>
<li><a href="#">CSS 进阶</a></li>
<li><a href="#">CSS 高级技巧</a></li>
<li class="menu1">WebUI</li>
<li><a href="#">理论知识</a></li>
<li><a href="#">实战应用</a></li>
<li><a href="#">高级技巧</a></li>
<li class="menu1">DOM</li>
<li><a href="#">DOM 入门</a></li>
<li><a href="#">DOM 应用</a></li>
<li><a href="#">DOM 与浏览器</a></li>
<li class="menu1">XHTML</li>
<li><a href="#">XHTML 参考手册</a></li>
<li><a href="#">XHTML 论坛</a></li>
</ul>
</div>
<div id="primary">
primary
</div>
</div>
</div>
</body>