To do NetEase Cloud music home When the problem encountered, the mouse refers to the top right corner of the picture when the drop-down box appears.
<style>
/* css*/
#body {
Float:left;
}
#xialakuang {
Background-color: #f9f9f9;
box-shadow:0px 8px 16px 0px Rgba (0,0,0,0.2);/* Sets the shadow of the drop-down box */
Display:none;
}
#body a{
Display:block;
padding:10px 15px;
Color: #C4C4C4;
line-height:20px;
font-size:12px;
}
#body a:link{
Text-decoration:none;
Background-color:black;
}
#body a:hover{
Background-color: #3E3D3D;
Color:white;
}33. anniu{
Background-color:black;
width:108px;
height:40px;
Color:white;
Border:none;
Cursor:pointer;
}
#body: hover #xialakuang {
Display:block; /* The drop-down box is displayed when the mouse is placed on a div, so the drop-box does not disappear when the mouse-down box is moved.
}
#body: hover. anniu{
Background-color: #3E3D3D;
}
</style>
<body>
<div id= "Body" >
<button class= "Anniu" > Move drop-down (CSS) </button>
<div id= "Xialakuang" >
<a href= "" > My home </a>
<a href= "" > My Messages </a>
<a href= "" > My level </a>
<a href= "" > Member Center </a>
<a href= "" > Personal settings </a>
<a href= "" > Exit </a>
</div>
</div>
</body>
Write down the dropdown box with CSS (code to WQ Group)