纯CSS导航

Question

小提琴这里遇到问题：http://jsfiddle.net/csaltyj/3A78u/

我要分分导航菜单将与其父的顶部对齐（因此顶部：0），但与父母的出于某种原因父对齐。我不知道发生了什么..任何想法？

HTML：

<div id="nav"> 
    <ul> 
     <li><a>Item One</a></li> 
     <li><a>Item Two</a> 
      <ul> 
       <li><a>Item two has babies</a></li> 
       <li><a>Baby #2</a> 
        <ul> 
         <li><a>Sub-babies</a></li> 
         <li><a>This is fun</a></li> 
         <li><a>Last Item</a></li> 
        </ul> 
       </li> 
       <li><a>SubSub</a> 
        <ul> 
         <li><a>Another Item</a></li> 
         <li><a>Another!</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

CSS：

#nav { 
    height: 40px; 
} 

#nav ul { 
    list-style: none; 
    font-family: Arial, sans-serif; 
    font-size: 0.8em; 
} 

/* When mousing over any LI, reveal its UL if any */ 
#nav > ul li:hover > ul { 
    display: block; 
} 

/* For all links */ 
#nav a { 
    text-decoration: none; 
    color: #000; 
} 

/* Main nav styling */ 
#nav > ul > li > a { 
    padding: 1em; 
} 

#nav a:hover { 
    color: red; 
} 

#nav > ul > li { 
    float: left; 
    border: 1px solid #999; 
} 

/* Subnav styling */ 
#nav > ul ul { 
    display: none; 
    position: absolute; 
    font-size: 1em; 
    background: #eee; 
    padding: 0.5em; 
    border: 1px solid #999; 
} 

/* Subsubnav styling */ 
#nav > ul ul ul { 
    left: 50px; 
    top: 0; 
    width: 150px; 
    position: absolute; 
} 

#content { 

} 

Answer 1

您需要添加position: relative为“2级” li元素：

#nav > ul ul li { 
    position: relative 
} 

这里有一个版本，其中婴儿都一字排开：http://jsfiddle.net/3A78u/2/

如果您想使用>，这将是#nav > ul > li > ul > li。

Answer 2

的 '顶部' 属性是相对于所述第一非静态定位的父。在这种情况下，它是UL元素（绝对定位）。您需要添加'位置：相对;'到列表项目以获取内部元素以相对对齐。