純CSS導航

小提琴這裏遇到問題：http://jsfiddle.net/csaltyj/3A78u/純CSS導航

我要分分導航菜單將與其父的頂部對齊（因此頂部：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 { 

}

來源

2011-06-02 CaptSaltyJack

您需要添加position: relative爲「2級」 li元素：

#nav > ul ul li { 
    position: relative 
}

這裏有一個版本，其中嬰兒都一字排開：http://jsfiddle.net/3A78u/2/

如果您想使用>，這將是#nav > ul > li > ul > li。

來源

2011-06-02 20:25:51 thirtydot

這有效，但引入了一個奇怪的透明度問題：http://jsfiddle.net/csaltyj/3A78u/3/ – CaptSaltyJack 2011-06-02 20:37:27

'z-index：1' on'#nav> ul ul ul'修復了它：http：/ /jsfiddle.net/3A78u/4/ – thirtydot 2011-06-02 20:42:28

的 '頂部' 屬性是相對於所述第一非靜態定位的父。在這種情況下，它是UL元素（絕對定位）。您需要添加'位置：相對;'到列表項目以獲取內部元素以相對對齊。

來源

2011-06-02 20:25:19

回答

相關問題