大学生就可以看懂的css基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
可能比较枯燥，但是再坚持一下，前端知识的大门就会大开了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown button {
font-size: 18px;
color: #f8f8f8;
padding: 10px;
background-color: #35be2e;
box-shadow: #d1fb2a;
cursor: pointer;
}
.dropdown button:hover {
background-color: #55be9d;
}
.dropdown-content {
display: none;
position: absolute; /**绝对定位 修改这个属性体验absolute*/
background-color: #ff8158;
min-width: 95px;
}
/*鼠标滑过显示另外一个组件**/
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
text-decoration: none;
text-align: center;
/*margin: 10px; margin 外边距 修改外边距时候,a的内部文字下划线不能跟着横向拉伸*/
/*padding: 10px; padding内边距 修改内边距达到文字行间隔效果 下划线是跟着padding一起拉伸*/
padding: 10px;
border-bottom-style: solid;
border-bottom-color: white;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="button"> 下拉菜单</button>
<div class="dropdown-content">
<a href="#">menu1</a>
<a href="#">menu2</a>
<a href="#">menu3</a>
</div>
</div>
<div style="position: absolute;margin-top: 200px">
<pre>
/**css滑过一个组件 修改另外一个样式内容**/
/*鼠标滑过显示另外一个组件**/
.dropdown:hover .dropdown-content {
display: none;
}
/**.dropdown-content a 修改文字内边距和外边距进行文字间隔,体验下划线长度效果*/
/*margin: 10px; margin 外边距 修改外边距时候,a的内部文字下划线不能跟着横向拉伸*/
/*padding: 10px; padding内边距 修改内边距达到文字行间隔效果 下划线是跟着padding一起拉伸*/
padding: 10px;
</pre>
</div>
</body>
</html>