CSS导航下拉菜单

CSS

学习

发布日期: 2020-06-22

更新日期: 2023-11-25

文章字数: 152

阅读时长: 1 分

阅读次数:

一个简单的CSS导航下拉菜单，效果如下：

<div class="cd">
      <button class="dh">我的爱好</button>
  <div class="xl">
     <a href="#">音乐</a>
 <a href="#">电影</a>
 <a href="#">美食</a>
  </div>
</div>

.dh{
background-color:blue;
color:white;
padding:10px;
font-size:16px;
border:none;
cursor:pointer;
}
.cd{
position:relative;
display:inline-block;
}
.xl{
display: none;
position: absolute;
min-width: 84px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.xl a{
background-color:#00FFFF;
color: blue;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.xl a:hover{
background-color:white;
color:red;
}
.cd:hover .xl{
display:block;
color:red;
}
.cd:hover .dh{
background-color:#00FFFF;
color:red;
}