CODEWITHSUNDEEP
htmlborder
tvalent2
tvalent2

Reputation: 5009

Creating a clean unified border around an li and its ul with CSS

Within my #header #nav, I have a <ul> within an <li> that displays on li:hover. I want to put a border around everything but for some reason adding a border around the main <li> makes the <ul> within it fall out of alignment by one px on the left.

Here's a jsFiddle to show what I'm doing:

http://jsfiddle.net/Mh3Hg/

Here is my HTML:

<div id="header">
  <div id="nav">
    <ul>
      <li id="thisli"><a href="#">Main Element</a>
        <ul id="children">
          <li><a href="#">First Child</a></li>
          <li><a href="#">Second Child</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- end nav -->
</div>

The border that throws it off is the border-left:1px solid #99B3FF applied to li#thisli. Can anyone help me figure out what's wrong?

Upvotes: 0

Views: 1907

Answers (1)

Felix Kling
Felix Kling

Reputation: 816334

The inner ul was always inside the li. The border is something which is supposed to be around the content, so it is theoretically around the inner ul as well. If you explicitly define the position of the inner ul:

#nav li:hover ul {
    display:block;
    z-index:100;
    left: 0px;
}

it is aligned: http://jsfiddle.net/Mh3Hg/4/

Upvotes: 1

Related Questions