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;
}
謝謝! div#dropMenu li li.submenu工作! – Gizmodo 2012-07-20 01:50:41