HTML下拉菜单（超详细）：html代码段：
<!--下拉菜单-->
<div class="downorder">
<button class="order">
下拉菜单
</button>
<div class="downtext">
<a href="">text1</a>
<a href="">text2</a>
<a href="">text3</a>
<a href="">text4</a>
</div>
</div>
css部分：
.downorder{
width: 100px;
position: relative;
height: auto;
}
.downorder:hover a{
display: block;
}
.
order{
position: relative;
text-align: center;
display: inline-block;
font-size: 16px;
padding: 15px;
background-color: rgb(16, 179, 243);
color: aliceblue;
}
.order:hover{
background-color: rgb(17, 100, 224);
color: rgb(14, 13, 13);
}
.downtext{
position: relative;
text-align: center;
display: inline-block;
font-size: 16px;
background-color: rgb(224, 187, 22);
color: aliceblue;
}
.downtext a{
/
* display: block; */
display: none;
padding: 15px;
}
.downtext a:hover{
background-color: rgb(27, 170, 111);
color: rgb(142, 236, 79);
html下拉菜单的制作方法}
讲解：
.downorder{
width: 100px;
position: relative;
height: auto;
}
对最⼤的盒⼦的修饰：
1.如果不加宽就⽆法限制浮动
2.
relative相对定位元素的定位是相对其正常位置。
保证盒⼦不会乱浮动
.downorder:hover a{
display: block;
}
.downtext a{
/* display: block; */
display: none;
padding: 15px;
}
这个是最重要的⼀步：
先将a标签设置为display：none（就是不显⽰，隐藏）
当⿏标经过⽗盒⼦的时候 ----‘a’标签，显⽰⽅式变为块级标签（有⾼宽）这样就有动态效果了
.order{
text-align: center；字体居中
font-size: 16px;
padding: 15px;/字体在框内的边距
background-color: rgb(16, 179, 243);///⿏标未碰到悬浮框的字体颜⾊
color: aliceblue;
}
这⼀部分修饰菜单栏的标题：
.order:hover{ background-color: rgb(17, 100, 224); color: rgb(14, 13, 13);}⿏标接触到后，悬浮框的颜⾊
.downtext{
position: relative;
text-align: center;
display: inline-block;//根据盒⼦⾥的的内容变换⼤⼩
font-size: 16px;
background-color: rgb(224, 187, 22);
color: aliceblue;
}
///
downtext a:hover{//对下拉菜单⾥的内容的修饰
background-color: rgb(27, 170, 111);
color: rgb(142, 236, 79);
}
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。