CODEWITHSUNDEEP
htmlcss
Xarcell
Xarcell

Reputation: 2011

A List Inside A Horizontal List

I'm experimenting with a design. It seems I can't get my CSS right. I have a horizontal list with a list in each of it's list items. The nested list doesn't seem to behave properly. What am I doing wrong here?

http://jsfiddle.net/89sqw/

The nested list doesn't have the squared list type, and the margin is all wrong.

Upvotes: 0

Views: 497

Answers (3)

bfavaretto
bfavaretto

Reputation: 71918

Everything you apply to #tfList li is valid to your nested list items too (unless you override). Also, you shouldn't have two elements with the same id, use classes instead.

Upvotes: 2

Ryan Wheale
Ryan Wheale

Reputation: 28400

Several prolems:

1) As mentioned by @bfavaretto, you can't have multiple elements with the same ID

2) You aren't closing your "P" tags. Closing tags have a slash (</p>)

3) You are using display: inline on an element which will contain block elements. This is invalid not good practice and will likely give you problems. Use inline-block instead:

#some-item {
  display: inline-block;
  vertical-align: top;
  *display: inline;
  *zoom: 1;
}

Edit: Tip - you can use special "child" selectors to only select immediate children of an element. http://jsfiddle.net/ryanwheale/F3cqD/

<ul>
  <li>
    Level 1
    <ul>
      <li>Level 2</li>
      <li>Level 2</li>
    </ul>
  </li>
  <li>Level 1</li>
</ul>

And these styles

ul > li {
  color: red;
}
ul > li > ul > li {
  color: green;
}

Upvotes: 1

zzzzBov
zzzzBov

Reputation: 179046

The issue is easy to miss, but it comes from having overridden the display property of #tfList li elements to display: inline, and then mistakenly trying to re-set it to display: block;.

The correct display for a list item is:

display: list-item;

Also, to get the spacing back on the list items, set the left padding on the ul element.

Fiddle

Upvotes: 1

Related Questions