本文摘自PHP中文网,作者不言,侵删。
css可以在网页中实现很多的效果,其中CSS下拉菜单是经常需要用到的效果,本篇文章就来给大家具体分享一下CSS下拉菜单的实现方法。
话不多说,下面我们就来看具体的实现代码。
HTML代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < ul >
< a href = "#" >水果</ a >
< ul >
< li >< a href = "#" >苹果</ a ></ li >
< li >< a href = "#" >香蕉</ a ></ li >
< li >< a href = "#" >草莓</ a ></ li >
</ ul >
</ ul >
< ul >
< a href = "#" >甜点</ a >
< ul >
< li >< a href = "#" >蛋糕</ a ></ li >
< li >< a href = "#" >曲奇</ a ></ li >
< li >< a href = "#" >面包</ a ></ li >
</ ul >
</ ul >
< ul >
< a href = "#" >奶茶</ a >
< ul >
< li >< a href = "#" >红豆奶茶</ a ></ li >
< li >< a href = "#" >珍珠奶茶</ a ></ li >
< li >< a href = "#" >全套奶茶</ a ></ li >
</ ul >
</ ul >
|
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | *{
padding : 0 ;
margin : 0 ;
}
ul,a{
font-size : 20px ;
list-style : none ;
text-decoration : none ;
background-color : #3C3C3C ;
color : #FFFFFF ;
width : 100px ;
text-align : center ;
border : 0px solid black ;
border-radius: 5px ;
margin-top : 1px ;
}
a{
display : block ;
}
.plat{
display : none ;
}
.nav{
float : left ;
margin-left : 1px ;
}
.nav:hover .plat{
display : block ;
clear : both ;
}
.plat li:hover>a{
background-color : dimgrey;
}
|
运行的效果如下:当鼠标放在下拉按钮上就会出现下拉菜单。
本篇文章到这里就已经全部结束了,更多精彩内容大家可以关注PHP中文网的CSS视频教程栏目!!!
以上就是css下拉菜单怎么做?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
怎么实现html 可输入下拉菜单
怎样实现html的可输入下拉菜单
bootstrap如何制作下拉菜单
html怎么实现可输入的下拉菜单
css下拉菜单怎么做?
html可输入下拉菜单应该如何编写
css如何实现下拉菜单
bootstrap如何触发下拉菜单
浅谈bootstrap中的下拉菜单类(dropdown-menu)
在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值
更多相关阅读请进入《下拉菜单》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css下拉菜单怎么做?