2012-07-20 135 views
0

我有一個CSS下拉菜單,我很努力地爲不同的級別定製它。例如,你首先看到的是第一層,下一層是第二層。我想定製不同層次的東西。CSS下拉菜單級別

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; 
} 

回答

2

這應該這樣做

#dropMenu li li { 
    background: ... 
} 
+0

謝謝! div#dropMenu li li.submenu工作! – Gizmodo 2012-07-20 01:50:41