Question

I have a CSS Dropdown menu and I am struggling with customizing it for different levels. For example, what you see on first drop down is level 1, and next drop down from out of that is level 2. I want to customize things for different levels.

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

Above code puts an image of an arrow if you have a submenu item. This is working fine, however, I don’t want it on the top menu, I want it just on first drop down and forward. How can I specify it? I tried ‘div#dropMenu li.level1.submenu’ and it doesn’t work.

Here I posted rest of the CSS sheet:

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

This should do it

#dropMenu li li {
     background: ...
}