CODEWITHSUNDEEP
htmlcssstylesheetmarkup
veilig
veilig

Reputation: 5135

css menu list with nested lists

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

Upvotes: 1

Views: 549

Answers (1)

Matt Ball
Matt Ball

Reputation: 359776

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?

Upvotes: 1

Related Questions