Nested menu LIs with and without background images

Whoops,
I found my error...

#left_nav ul li[B].extended[/B] ul li a {
display: block;
padding: 2px 5px 2px 30px;
width: 190px;
text-decoration: none;
background-image:none;}

Code (markup):

... did the trick. Sorry

/Claes





Hi,
I am having a problem with a vertical menu made up by LIs. The menu is in 2 levels built like:

<div id="left_nav">
<ul>
   <li><a class="main" href="xxx.html">HeaderLink 1</a>
      <ul>
         <li><a href="yyy.html">SubLink 1.1</a></li>
         <li><a href="yyy.html">SubLink 1.2</a></li>
      </ul>
   </li>
   <li><a class="main" href="xxx.html">HeaderLink 2</a>
      <ul>
         <li><a href="yyy.html">SubLink 2.1</a></li>
         <li><a href="yyy.html">SubLink 2.2</a></li>
      </ul>
   </li>
   <li class="extended"><a class="main" href="xxx.html">HeaderLink 3</a>
      <ul>
         <li class="active"><a href="yyy.html">SubLink 3.1</a></li>
         <li><a href="yyy.html">SubLink 3.2</a></li>
      </ul>
   </li>
</ul>
</div>

Code (markup):

My CSS is:

#left_nav {
font-size: 90%;}

#left_nav ul {
margin: 0;
padding: 0;
list-style-type: none;}

#left_nav li {
border-bottom:solid 1px #eaeaea;}

#left_nav li a {
color:#aaaaaa;  /* all non-active links*/}

#left_nav li a.main {
display: block;
padding: 5px 10px;
width: 190px;
font-weight:bold;
background: url("../../../images/common/bg_collapsed.gif") no-repeat 0 5px;
text-decoration: none;
text-transform:uppercase;}

#left_nav li.extended a {
background: url("../../../images/common/bg_extended.gif") no-repeat 0 5px;}

#left_nav li.extended a,
#left_nav li.extended ul li.active a {
color: #000;}

#left_nav a:hover {
color: #000;
text-decoration: none;}

#left_nav ul li ul li {
border-bottom:none;}

#left_nav ul li ul li a {
display: block;
padding: 2px 5px 2px 30px;
width: 190px;
text-decoration: none;
background-image:none;}

#left_nav ul li ul li a:hover {
color: #000;
background-color: #ececec;
text-decoration: none;}

Code (markup):

I cannot figure out a way to get around my problem. Basically I want to remove the background image to each "sub-LI link",that is #left_nav ul li ul li a. Bg image should only be on the "main" menu (2 types: extended or not).
I thought

#left_nav ul li ul li a {
display: block;
padding: 2px 5px 2px 30px;
width: 190px;
text-decoration: none;
[B]background-image:none;[/B]}

Code (markup):

would do the trick, but no...

Can anyone help me out?
Many thanks!!

/Claes

 

Still need help?

 

jason, thanks for asking but I found the error myself, it is in my original post.
Didn't know how to set the post as "solved" though...