CODEWITHSUNDEEP
css
ArK
ArK

Reputation: 21058

list background color

alt text http://img191.imageshack.us/img191/3213/menub.jpg

How to extend the background color of the Test2 to the left.

Upvotes: 0

Views: 405

Answers (2)

David Andersson
David Andersson

Reputation: 1246

Were the html to look like this:

<ul>
 <li/>
 <li class="expanded">
  <ul>
   <li/>
   <li/>
  </ul>
 </li>
</ul>

I'd use something like the following css:

ul, li {padding:0; margin:0;}
ul li { padding-left: 20px; background: transparent url('collapsed.gif') no-repeat top left;}
ul li.expanded {background-image: url('expanded.gif'); background-color: blue;}
ul li.expanded ul {padding-left: 20px;}
ul li.expanded ul li {padding-left: 20px; background-image: url('sub_bullet.gif');}

Upvotes: 1

Pekka
Pekka

Reputation: 449395

You will need to remove all margin from the li and all padding from the ul:

ul { padding-left: 0; }
li { margin-left: 0; }

If that gives you layout problems, try adding more padding-left to the li.

If your bullet images are impossible to position correctly when you take away the ul's padding, you could consider using a background-image in the li instead.

Upvotes: 1

Related Questions