css menu list with nested lists

Question

I'm trying to recreate this type (example 1, example 2) of menu list style, but I need it to be able to handle nested lists and I'm not sure how to do it. does anyone have any insight how I can do this?

ie (w/ minimal markup) :

<ul>
  <li>one</li>
  <li>two
    <ul>
      <li>two and half</li>
    </ul>
  </li>
</ul>

Thanks a bunch!!

Matt Ball · Accepted Answer · 2010-04-20 16:44:03Z

1

I don't know what styles you're trying to apply, but I can get you started with empty CSS rules for each level:

ul { /* CSS properties here */ } will let you style all ul elements
ul > li > ul { ... } will override the applied CSS style for the inner ul elements, because the selector has a higher specificity
Likewise, for the li elements, use the rule li { ... } for the outer li elements, and
ul > li > ul > li { ... } for the inner li elements

Does that help?

answered Apr 20, 2010 at 16:44

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

veilig Over a year ago

kind of. This will be a tree with sub-levels, sub-sub-levels, etc... But I need some links on the right hand side to all line up, irregardless of the level. I'm not much of a CSS guru, but I do understand the higher weight for the more specific rules. just trying to figure out how to get a child tree to play nicely. might be over my head.

Matt Ball Over a year ago

You might be able to pull it off with relative positioning (and other CSS) applied to every child ul (or its li children) so that you don't have to explicitly set whatever you need at every level. I wonder if you might not be better off using a library for this?

Collectives™ on Stack Overflow

css menu list with nested lists

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related