<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;
}