核心提示：一、html+css1.利用css中的display属性 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 源代码：html!do...
一、html+css
1.利用css中的display属性
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
源代码：
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页</title>
<link rel="stylesheet" type="text/css" href="各种功能总结实验网页.css">
</head>
<body>
<p id="wrapper">
<p id="header">
</p>
<p id="nav">
<ul>
<li><a href="#">恋爱百科</a></li>
<li class="drop-down"><a href="#">星座查询</a>
<ul class="drop-down-content">
<li><a href="#">白羊座</a></li>
<li><a href="#">金牛座</a></li>
<li><a href="#">双子座</a></li>
<li><a href="#">巨蟹座</a></li>
<li><a href="#">狮子座</a></li>
<li><a href="#">处女座</a></li>
<li><a href="#">天秤座</a></li>
<li><a href="#">天蝎座</a></li>
<li><a href="#">射手座</a></li>
<li><a href="#">摩羯座</a></li>
<li><a href="#">水瓶座</a></li>
<li><a href="#">双鱼座</a></li>
</ul>
</li>
<li><a href="#">小游戏</a></li>
<li><a href="#">问卷调查</a></li>
</ul>
</p>
</p>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body{
font-family:宋体,Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
background:#F6F9F9;
}
a{
text-decoration:none;
color:#000000;
}
ul{
list-style-type:none;
}
#wrapper{
width:1000px;
margin:0px auto;
}
#header{
width:100%;
background:#0099FF;
}
#nav{
width:100%;
height:50px;
background-color:#41B4F6;
float:left;
margin-top:70px;
}
#nav ul .drop-down{
float:left;
}
#nav>ul>li>a{
float:left;
font-size:20px;
color:#ff;
width:150px;
margin-top:5px;
background:url(%E6%B5%8B%E8%AF%95%E7%BD%91%E9%A1%B5%EF%BC%8C%E6%96%B0%E5%8A%9F%E8%83%BD%E5%AD%A6%E4%B9%A0/%E5%9B%BE%E7%89%87/%E5%9B%BE%E7%89%871.png) no-repeat right top;
text-align:center;
}
#nav ul .drop-down .drop-down-content a{
float:left;
font-size:20px;
color:#ff;
background-color:#00CCFF;
width:150px;
height:30px;
text-align:center;
}
#nav>ul>li:hover a{
background-color:#0B9EF4;
border-radius:20px 20px 20px 20px;
}
#nav ul .drop-down-content{
display:none;
padding:0px;
}
#nav ul .drop-down:hover .drop-down-content{
display:block;
}
效果
2.利用CSS的overflow属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页</title>
<link rel="stylesheet" type="text/css" href="各种功能总结实验网页.css">
</head>
<body>
<p id="wrapper">
<p id="header">
</p>
<p id="nav">
<ul>
<li><a href="#">恋爱百科</a></li>
<li class="drop-down"><a href="#">星座查询</a>
<ul class="drop-down-content">
<li><a href="#">白羊座</a></li>
<li><a href="#">金牛座</a></li>
<li><a href="#">双子座</a></li>
<li><a href="#">巨蟹座</a></li>
<li><a href="#">狮子座</a></li>
<li><a href="#">处女座</a></li>
<li><a href="#">天秤座</a></li>
<li><a href="#">天蝎座</a></li>
<li><a href="#">射手座</a></li>
<li><a href="#">摩羯座</a></li>
<li><a href="#">水瓶座</a></li>
<li><a href="#">双鱼座</a></li>
</ul>
</li>
<li><a href="#">小游戏</a></li>
<li><a href="#">问卷调查</a></li>
</ul>
</p>
<h3>白茶清欢无别事，我在等风也等你</h3>
</p>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{
font-family:宋体,Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
background:#F6F9F9;
}
a{
text-decoration:none;
color:#000000;
}
ul{
list-style-type:none;
}
#wrapper{
width:1000px;
margin:0px auto;
}
#header{
width:100%;
background:#0099FF;
}
#nav{
width:100%;
height:50px;
background-color:#41B4F6;
float:left;
margin-top:70px;
}
#nav ul .drop-down{
float:left;
overflow:hidden;
height:27px;
}
#nav>ul>li>a{
float:left;
font-size:20px;
color:#ff;
width:150px;
margin-top:5px;
background:url(%E6%B5%8B%E8%AF%95%E7%BD%91%E9%A1%B5%EF%BC%8C%E6%96%B0%E5%8A%9F%E8%83%BD%E5%AD%A6%E4%B9%A0/%E5%9B%BE%E7%89%87/%E5%9B%BE%E7%89%871.png) no-repeat right top;
text-align:center;
}
#nav ul .drop-down .drop-down-content a{
float:left;
font-size:20px;
color:#ff;
background-color:#00CCFF;
width:150px;
height:30px;
text-align:center;
}
#nav>ul>li:hover a{
background-color:#0B9EF4;
border-radius:20px 20px 20px 20px;
}
#nav ul .drop-down-content{
padding:0px;
}
#nav ul .drop-down:hover{
overflow:visible;
}
h3{
clear:both;
font-size:50px;
}
这个overflow不同于第一种的display。是将导航的那一栏固定一个高度，当鼠标碰到的时候会显示被固定高度隐藏的内容。
效果
这里的下拉框是透明的，而且如果碰到下面的字下拉框就消失了，不推荐使用。
