CSSドロップダウンメニューがあり、さまざまなレベルに合わせてカスタマイズするのに苦労しています。たとえば、最初のドロップダウンに表示されるのはレベル1で、その中から次のドロップダウンはレベル2です。さまざまなレベルに合わせてカスタマイズしたいと思います。
div#dropMenu li.submenu
{
background: url(../images/arrows/arrow11.png) no-repeat 99% 99%;
}
div#dropMenu li.submenu:hover
{
background: url(../images/arrows/arrow9.png) no-repeat 99% 99%;
}
上記のコードは、サブメニュー項目がある場合に矢印の画像を配置します。これは正常に機能していますが、トップメニューには表示したくないので、最初のドロップダウンと前方に表示したいだけです。どうすれば指定できますか？'div＃dropMenu li.level1.submenu'を試しましたが、機能しません。
ここにCSSシートの残りを投稿しました：
div#dropMenu {
width:1000px;
margin:0px 0px;
text-align:center;
z-index:1000;
position:relative;
}
div#dropMenu ul {
border-left: 1px solid #333;
margin:0;
padding:0;
}
div#dropMenu li {
border-right: 1px solid #999;
position:relative;
list-style:none;
margin:0;
float:left;
line-height:1em;
width:19.90%;
/**width:16.55%;*/
}
div#dropMenu ul.level1 {
width:100%;
margin:0 auto;
text-align:left;
background: url(../images/menu_bg.png) repeat-x; margin-top: 0px; color: #fff;/*background color of top menu when NOT selected. */
z-index:1000;
float:left;
}
div#dropMenu ul.level2 li {
padding-top: 6px;
border-top: 1px solid #999999;
}
div#dropMenu li a {
display: block;
/* Hides from IE5-mac \*/
height: 1%;
/* End hide from IE5-mac */
padding: 15px 0px 10px 0px;
text-decoration: none;
color: #555;
font-size: 13px;
-webkit-font-smoothing: antialiased;
text-align:center;
font-weight: bold;
border-right: 0px solid ;
}
div#dropMenu li:hover {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a.noLine {
border:none;
}
div#dropMenu>ul a {
width: auto;
z-index:1000;
}
div#dropMenu ul ul {
display: none;
}
div#dropMenu ul ul li {
width:16.5em;
}
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,
div#dropMenu ul.level7 li.submenu:hover ul.level8 {
position: absolute;
width: 12em;
display:block;
z-index:1000;
width: 16.5em;
}