1<style>2 /*CSS*/3 #body {4 float: Left;5 }6 #xialakuang {7background-color: #f9f9f9;8box-shadow:0px 8px 16px 0px Rgba (0,0,0,0.2)/// * Set the shadow of the drop-down box * /9 Display:none;Ten } One #body a{ A Display:block; - padding:10px 15px; - color: #C4C4C4; theline-height:20px; -font-size:12px; - } - #body a:link{ +text-Decoration:none; -background-Color:black; + } A #body a:hover{ atbackground-color: #3E3D3D; - Color:white; - } - . anniu{ thebackground-Color:black; * width:108px; $ height:40px;Panax Notoginseng Color:white; - Border:none; the Cursor:pointer; + }
A #body: hover #xialakuang { the 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> the<div id= "Body" > -<button class= "Anniu" > Move drop-down (CSS) </button>Wuyi<div id= "Xialakuang" > the<a href= "" > My home </a> -<a href= "" > My Messages </a> Wu<a href= "" > My level </a> -<a href= "" > Member Center </a> About<a href= "" > Personal settings </a> $<a href= "" > Exit </a> -</div> -</div> -</body>
I didn't expect CSS to write down a drop-down menu.
A drop-down menu written in CSS