问题描述
我有一个在所有浏览器中看起来都很棒的 2 级下拉菜单.现在我想添加第三级.我该怎么做?
I have a 2-level drop down menu that looks great in all browsers. Now I want to add a 3rd level. How do I do that?
这是我的菜单 HTML:
Here is my HTML for the menu:
<div class="nav"> <div class="navbar"> <ul class="menu"> <li><a href="#">Home</a></li> <li><a href="#">About JoyFactory</a> <ul class="sub-menu"> <li><a href="#">Who We Are</a></li> <li><a href="#">Our Education Concept</a></li> <li><a href="#">References</a></li> </ul> </li> <li><a href="#">JoyFactory Kinderkrippe</a> <ul class="sub-menu"> <li><a href="#">JoyFactory Kinderkrippe Oerlikon</a> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> </ul> </li> <li><a href="#">JoyFactory Kinderkrippe Seebach</a></li> </ul> </li> </ul> </div> </div>
这是我的 CSS:
.nav { clear:both ; width:1020px ; height:55px ; background:url("images/nav-bg.png") no-repeat ; position:absolute ; top:125px ; left:-10px ; } .navbar { width:1000px ; height:50px ; margin:auto ; } ul.menu { margin-left:0 ; padding-left:0 ; list-style-type:none ; } .menu li { display:inline ; float:left ; height:50px ; margin:0 6px ; } .menu li a { font-family:'MyriadPro-SemiboldCond' ; font-size:24px ; color:#ffffff ; text-decoration:none ; height:50px ; line-height:50px ; padding:0px 10px ; } .menu li:hover, .menu li:hover a { background:#ffd322 ; color:#e32a0e ; } .sub-menu { position:absolute ; float:none ; padding:0 ; top:50px ; z-index:9999 ; background:#ffd322 ; margin-left:0 ; padding-left:0 ; } .sub-menu li { display:none ; min-width:175px !important ; margin: 0 !important; padding: 0 !important; } .sub-menu li a, .current-menu-parent .sub-menu li a { display:block ; background:#ffd322 ; font-family:arial,helvetica,sans-serif ; font-size:16px ; padding:0 10px ; border-top:1px solid #f37f10 ; border-left:none ; } .sub-menu li a:hover, .menu li.current-menu-parent .sub-menu li.current-menu-item a { background:#f37f10 } .menu li:hover li { float: none; display:block; clear: both; }
任何帮助将不胜感激!
非常感谢:)
推荐答案
这是一个基本的子菜单设置:http://jsfiddle.net/Wss5A/
Here is a basic submenu setup: http://jsfiddle.net/Wss5A/
* { list-style:none; margin:0; padding:0; font-size:1em; cursor:pointer; } #menu{ margin:**x; } #menu > li{ /* Top Level */ float:left; margin-right:**x; } #menu > li > span{ display:block; background:#0ac; padding:**x 10px; } #menu > li:hover > span{ color:#fff; } #menu > li > ul{ /* Second Level */ display:none; background:#08a; } #menu > li:hover > ul{ display:block; position:absolute; } #menu > li > ul > li > span{ display:block; padding:**x 10px; border-top:solid **x #fff; } #menu > li > ul > li:hover > span{ color:#fff; } #menu > li > ul li > ul{ /* Third Level & beyond */ display:none; background:#068; } #menu > li > ul li:hover > ul{ display:block; position:absolute; left:100%; border-left:solid **x #fff; top:0; width:auto; } #menu > li > ul > li ul > li{ display:block; padding:**x 10px; border-top:solid **x #fff; white-space:nowrap; } #menu > li > ul > li ul > li:hover > span{ color:#fff; }