5
私はすべてのブラウザで素晴らしい2レベルドロップダウンメニューを持っています。今私は第3レベルを追加したいと思います。それ、どうやったら出来るの?CSSドロップダウンメニューに第3レベルを追加するにはどうすればいいですか?
は、ここにメニューのための私のHTMLです:
<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; }
任意の助けが最もいただければ幸いです!
多くの感謝:)ここ
、コードはすべて私の頭の中に巻き込まれている:)私はwが付着しています/純粋なCSSが - ないjquery。 – Cynthia
あなたのCSSを見てください。 .sub-menuとその下に.sub-menu ....。サブメニューなどありますか?私はあなたの第3レベルのメニューをスタイルするためにあなたがする必要があることを言及する必要がありますか? – Ddorda
そのサブメニューはメニューの第2レベル用です。 – Cynthia