回复内容：
几个下拉菜单display:none
按钮 :hover 给下拉菜单display:block
也许可以
无脚本，纯HTML和 CSS 实现的多级下拉菜单，在非 IE 内核浏览器和 IE8+ 表现完美。
主体使用ul>li>ul>li>......嵌套定义多级。
http-equiv= "Content-Type" content= "text/html; charset=utf-8" >
纯 CSS 多级菜单
.menu {}
.menu ul , .menu li { margin : 0 ; padding : 0 ; list-style : none outside ;}
.menu > ul { overflow : auto ; display : inline - block ;}
.menu a , .menu span { cursor : default ; height : 30px ; line-height : 30px ; padding : 0 5px ; display : block ; text - overflow : ellipsis ; overflow : hidden ; text-decoration : none ; color : MenuText ;}
.menu a :hover , .menu span :hover , .menu li :hover > a , .menu li :hover > span { color : HighlightText ;}
.menu li :hover { background-color : Highlight ;}
.menu li :hover > ul { display : block ;}
.menu > ul > li { float : left ;}
.menu > ul > li ul { display : none ; float : left ; background-color : #fff ; border : 1px solid Highlight ; position : absolute ;}
.menu > ul > li li { padding-left : 25px ; margin : 2px ; background : transparent url(data:image/gif;base64,R0lGODlhEAAQAIAAAJmZmf///yH5BAAAAAAALAAAAAAQABAAAAIjhI9pwe2+nmRRIQrmjBrmYB1Y93Ak+IXVd6LtiIZwa5JqWAAAOw==) no-repeat 5px center ; width : 150px ;}
.menu > ul > li > ul > li ul { margin-left : 140px ; margin-top :- 30px ;}
.menu li .expand > a , .menu li .expand > span { background : transparent url(data:image/png;base64,R0lGODlhAwAQAIABAAAAAP///yH5BAEAAAEALAAAAAADABAAAAIKjI8JBtv/wko0FQA7) no-repeat right center ; padding-right : 10px ; margin-right : 5px ;}
.menu > ul > li .expand > a , .menu > ul > li .expand > span { background-image : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAADCAYAAACwAX77AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAaSURBVBhXY2BgYPiPAwOFMSXBgjAA0wnmAwASVQv19UVKmwAAAABJRU5ErkJggg==) ;}
查看更多关于如何通过html和css完成下拉菜单的制作？的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did66142