效果图:
css代码:
.downorder {
width: 100px;
height: auto;
position: relative;
}
.downorder:hover a{
display: block;/*鼠标移入菜单显示a标签内容*/
}
.order {
position: relative;
text-align: center;
display: inline-block;
font-size: 16px;
padding: 15px;
background-color: dodgerblue;
}
.order:hover {
background-color: aqua;
color: #FFFF00;
}
.downtext {
position: relative;
text-align: center;
display: inline-block;
font-size: 16px;
background-color: #7FFF00;
}
.downtext a {
display: none;/*隐藏a标签内容*/
text-decoration: none;
color: red;
padding: 15px;
}
.downtext a:hover {
background-color: aqua;
color: #FFFF00;
}
html代码:
<div class="downorder">
<button class="order">
下拉菜单
</button>
<div class="downtext">
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >内容1</a>
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >内容2</a>
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >内容3</a>
<a href="javascript:;" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >内容4</a>
</div>
</div>