css基础样式:
ul {
overflow: hidden;/*解决ul无高度*/
background-color: #333;
}
/*使用左浮动制作水平菜单*/
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
/*下拉菜单 hover时候改变display*/
.dropdown:hover .dropdown-content {
display: block;
}
html代码:
<ul>
<li>
<a class="active" href="#home">主页</a>
</li>
<li>
<a href="#news">新闻</a>
</li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</ul>
<h3>导航栏上的下拉菜单</h3>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
小结:
1.css选择器组合不要超过三层。
2.注意hover的写法。
.dropdown:hover .dropdown-content {
display: block;
}
3.div是层级嵌套,组合选择器时注意权重,小心样式覆盖问题。
4.a标签是内联元素。注意常用的内联元素和块级元素。
5.display是个重要的属性,需要多用多体会。