<html>
<head>
<title>CSS+DIV网页布局和横向列表导航菜单</title>
<style>
body{
}
/*container不要浮动，其作用是确定整体上的宽度，并居中*/
#container{
width: 960px;
margin: auto auto;
}
#header{
width: 100%;
float: left;
}
#logo{
width: 19.8%;
height: 80px;
background: green;
float: left;
margin-right: 0.2%;
}
#adtop{
width: 49.8%;
height: 80px;
background: olive;
float: left;
margin-right: 0.2%;
}
#webapp{
width: 30%;
height: 80px;
background: violet;
float: left;
}
#menu{
width: 100%;
background: skyblue;
float: left;
}
.ul_out{
list-style: none; /*去掉前导符*/
padding: 0px; /*让各项文本仅靠左边*/
margin: 0px; /*去掉ul的上下外边距*/
line-height: 2; /*调整菜单栏的高度*/
font-size: 0px; /*父级元素的font-size设置为0px消去inline-block元素因换行导致的空格*/
}
.li_out{
display: inline-block; /*使各个li元素显示在同一行*/
width:19.84%;margin: 0px;
text-align: center;
font-size: 16px; /*子级元素把字体重新设置成需要大小*/
cursor: pointer;
background: skyblue;
}
.li_space{
display: inline-block;
width: 0.2%;
height: 20px;
background: gray;
position: relative;
top: 5px;
}
.ul_in{
list-style: none;
padding: 0px;
margin: 0px;
background: lightcyan;
position: absolute;
width: 170px;
padding: 10px;
display: none; /*关键代码，当鼠标未停留在相应的一级菜单上时呈隐藏状态*/
}
.li_in{
line-height: 1.5;
}
.li_out:hover .ul_in{
display: block; /*当鼠标悬停在相应的一级菜单上时显示二级菜单*/
}
.li_in:hover{
background: cyan;
}
#menu a{
text-decoration: none;
}
#main{
width: 100%;
float: left;
}
.leftbox{
width: 75%;
height: 400px;
float: left;
background: yellow;
}
.rightbox{
width: 24.8%;
height: 400px;
float:right;
background: greenyellow;
margin-left: 0.2%;
/*border: 1px solid red; 不可加边框*/
}
#footer{
width: 100%;
height: 100px;
background: plum;
float: left;
}
.space{
width: 100%;
height: 3px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<span>logo</span>
</div><!--id="logo"-->
<div id="adtop">
<span>adtop</span>
</div><!--id="adtop"-->
<div id="webapp">
<span>webapp</span>
</div><!--id="webapp"-->
<div class="space"></div>
<div id="menu">
<ul class="ul_out">
<li class="li_out">
<a href="#">菜单 1</a>
<ul class="ul_in">
<li class="li_in"><a href="#">菜单 1.1</a></li>
<li class="li_in"><a href="#">菜单 1.2</a></li>
<li class="li_in"><a href="#">菜单 1.3</a></li>
</ul><!--class="ul_in"-->
</li><!--菜单 1-->
<li class="li_space"></li>
<li class="li_out">
<a href="#">菜单 2</a>
<ul class="ul_in">
<li class="li_in"><a href="#">菜单 2.1</a></li>
<li class="li_in"><a href="#">菜单 2.2</a></li>
<li class="li_in"><a href="#">菜单 2.3</a></li>
</ul><!--class="ul_in"-->
</li><!--菜单 2-->
<li class="li_space"></li>
<li class="li_out">
<a href="#">菜单 3</a>
<ul class="ul_in">
<li class="li_in"><a href="#">菜单 3.1</a></li>
<li class="li_in"><a href="#">菜单 3.2</a></li>
<li class="li_in"><a href="#">菜单 3.3</a></li>
<li class="li_in"><a href="#">菜单 3.4</a></li>
<li class="li_in"><a href="#">菜单 3.5</a></li>
</ul><!--class="ul_in"-->
</li><!--菜单 3-->
<li class="li_space"></li>
<li class="li_out">
<a href="#">菜单 4</a>
<ul class="ul_in">
<li class="li_in"><a href="#">菜单 4.1</a></li>
<li class="li_in"><a href="#">菜单 4.2</a></li>
<li class="li_in"><a href="#">菜单 4.3</a></li>
</ul><!--class="ul_in"-->
</li><!--菜单 4-->
<li class="li_space"></li>
<li class="li_out">
<a href="#">菜单 5</a>
<ul class="ul_in">
<li class="li_in"><a href="#">菜单 5.1</a></li>
<li class="li_in"><a href="#">菜单 5.2</a></li>
<li class="li_in"><a href="#">菜单 5.3</a></li>
<li class="li_in"><a href="#">菜单 5.4</a></li>
</ul><!--class="ul_in"-->
</li><!--菜单 5-->
</ul><!--class="ul_out"-->
</div><!--id="menu"-->
</div><!--id="header"-->
<div class="space"></div>
<div id="main">
<div class="leftbox">
</div><!--class="leftbox"-->
<div class="rightbox">
</div><!--class="rightbox"-->
</div><!--id="main"-->
<div class="space"></div>
<div id="footer">
</div><!--id="footer"-->
</div><!--id="container"-->
</body>
</html>
