display:none 可以隐藏元素
display:block 不仅可以让行内元素转变成块级元素 还可以显示元素
实例
CSS样式
<style>
* {
margin: 0;
padding: 0;
}
/* 清除列表的黑点 */
ul li {
list-style-type: none;
}
/* 清除a链接的默认下划线 */
a {
text-decoration: none;
}
.nav1 {
width: 400px;
height: 50px;
/* 让盒子在浏览器窗口居中方便观看 */
margin: 100px auto;
}
.nav1>li {
/* 让一级导航栏左浮动 */
float: left;
}
.nav1 a {
/* 将a转为块级元素 */
display: block;
width: 100px;
height: 50px;
font: 12px/50px "微软雅黑";
color: black;
text-align: center;
border: 1px solid #bbb;
box-sizing: border-box;
}
.nav2 {
/* 隐藏元素 */
display: none;
}
/* 当鼠标滑过li的时候 让元素显示 */
.nav1 li:hover .nav2{
display: block;
}
.nav1>li:hover .a1{
background-color: #333;
color: #fff;
}
a:hover{
background-color: #333;
color: #fff;
}
</style>
html结构
<ul class="nav1">
<li>
<a href="" class="a1">一级导航</a>
<ul class="nav2">
<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="" class="a1">一级导航</a>
<ul class="nav2">
<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="" class="a1">一级导航</a>
<ul class="nav2">
<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="" class="a1">一级导航</a>
<ul class="nav2">
<li><a href="">二级导航</a></li>
<li><a href="">二级导航</a></li>
<li><a href="">二级导航</a></li>
<li><a href="">二级导航</a></li>
</ul>
</li>
</ul>