Background colors for LI's

Need help for background colors for LIs, when used with ULs

[Matt]

Hi

First of all, let me apologies for what may be a dumb question - I've got very little CSS experience.

I'm using a expandable list menu (from dynamic drive), which has roughly the following structure:

<UL> 
 <LI>Main Menu</LI> 
 <UL> 
  <LI>Sub Menu 1</LI> 
  <LI>Sub Menu 2</LI> 
 </UL> 
</UL> 

I want to put a background color on the Main Menu item (so in a big list, it shows up as a heading). However, when i put a background-color style tag on it, it also includes the sub menus in the UL.

Ideally, I would like a background color that stretches the width of the page, or even some kind of image background (but, something that will handle cross-browser, and different resolutions).

Any help would be appreciated.

[mipapage]

Welcome to WebmasterWorld!

---

What is happening: The second level li is inheriting the background color which you set to match 'ul li'. So, you will have to get 'specific' and set a background color for the second level li's:

ul li {
background: red /* this sets the first level li */
}

ul li ul li {
background: #fff /* this sets the second level li */
}

[Matt]

Hi mipapage

Thanks for the quick reply.

The only problem with that solution is that i then get a 'box inside a box', with the background color of the UL around the color of the LI's.

If you try out the following, you can see that the highlight covers the bullets in the child list.

<UL> 
  <LI style='background-color: #e7e7e7'>Main Menu</LI> 
  <UL style='background-color: #7e7e7e'> 
    <LI>Sub Menu 1</LI> 
    <LI>Sub Menu 1</LI> 
  </UL> 
</UL> 

I want the background to cover the main menu, including the bullet.

[Matt]

Hmmmm...

Just noticed that it does work in firefox, but it doesn't in IE...

Damn IE...

[moltar]

Your code is incorrect, inner ULs supposed to be within one of the LIs.

<ul> 
 <li>main menu 
  <ul> 
   <li>sub menu 1</li> 
   <li>sub menu 2</li> 
  </ul> 
 </li> 
</ul> 

Other than that, check out

list-style-position

[Matt]

Moltar

Ahh, yes, had missed that. UL now moved.

The list-style-position property seems to move the bullets inside the block of color, but still keeps the outside block of color.

<UL> 
 <LI style='background-color: #e7e7e7'>Main Menu 
  <UL style='background-color: #7e7e7e;list-style-position: inside;'> 
   <LI style="list-style-position: inside;">Sub Menu 1</LI> 
   <LI style="list-style-position: inside;">Sub Menu 1</LI> 
  </UL> 
 </LI> 
</UL> 

Any other ideas?

[moltar]

I think

margin: 0;

should take care of the extra space. Didn't test it though.

[Matt]

Gave the margin: 0; a go, and didn't help. I tried various combinations of it, but i could get it to work.

Any other ideas?

[moltar]

This works:

ul { 
  background-color: blue; 
  list-style-type: none; 
  color: white; 
} 
ul li ul { 
  background-color: white; 
  color: black; 
  margin: 0; 
  padding-left: 30px; 
} 

[Matt]

Moltar

That works! Thanks for your help.

Cheers,
Matt