Question

我有一个CSS下拉菜单，我正在努力为不同级别定制它。例如，您在第一个下拉列表中看到的是第1级，接下来从第2级下拉到第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;
}

Answer 1

这应该这样做

#dropMenu li li {
     background: ...
}

CSS下拉菜单级别

1 个答案: