排列一个子菜单，它的父母李

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。