使用CSS在li及其ul周围创建一个干净的统一边框

Question

在我的#header #nav中，我<ul>内的<li>显示在li:hover上。我想在所有内容周围添加边框，但由于某些原因在主<li>周围添加边框会使其中的<ul>在左边的一个px上失去对齐。

这是一个jsFiddle来展示我正在做的事情：

http://jsfiddle.net/Mh3Hg/

这是我的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>

将其抛弃的边框是border-left:1px solid #99B3FF应用于li#thisli。谁能帮我弄清楚什么是错的？

Answer 1

内部ul始终在 li内。边界应该是围绕内容的东西，所以理论上它也在内部ul附近。如果明确定义内部ul的位置：

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

它已对齐：http://jsfiddle.net/Mh3Hg/4/