排列一個子菜單，它的父母李

Question

我想設置一個子菜單，其中第一項排列了它的父母李項目，是否有一種方法做到這一點，而不使用負邊緣在第二UL（＃ innerNav）。我的代碼可以在http://jsfiddle.net/ueEEa/2/

---

#parentNav { 
    float: left; 
    padding: 0; 
    width: 160px; 
    border-bottom: 1px dashed #999; 
} 

#parentNav > li, #parentNav > li > #innerNav > li { 
    list-style: none; 
    border: 1px dashed #999; 
    display: block; 
} 

#parentNav li #innerNav { 
    display: none; 
} 

#parentNav > li:hover > { 
    display: block; 
    margin-left: 160px; 
    width: 160px; 
    padding: 0px; 
    position:absolute 
} 

<div> 
    <ul id="parentNav"> 
     <li>Item 1</li> 
     <li>Item 2 
      <ul id="innerNav"> 
       <li>Item 2.1</li> 
       <li>Item 2.2</li> 
      </ul> 
     </li> 
     <li>Item 3</li> 
    </ul> 
</div> 

Answer 1

找到你可以通過給孩子導航菜單display: inline-block，而不是block。

否則這意味着其左邊緣將通常針對父<li>元件的右邊緣平齊，從而修復，我們還需要給display: relative到頂端菜單和left: 160px（等於頂部菜單的寬度），以子導航菜單。

See it in action。