Question

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.

Answer 1

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;
}