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!!

Answer 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?