如何將內標籤定位在不同的位置？

Question

我有這樣的菜單結構：

<div id="menu"> 
    <div class="body-menu"> 
     <ul> 
      <li class="current"><div class="body-menu"> 
       <a href="bla">Item1</a> 
       <ul> 
        <li class="current"><div class="body-menu"> 
         <a href="bla">Sub-Item 1</a> 
        </div></li> 
        <li class=""><div class="body-menu"> 
         <a href="bla">Sub-Item 2</a> 
        </div></li> 
       </ul> 
      </div></li> 
      <li class=""><div class="body-menu"> 
       <a href="bla">Item 2</a> 
      </div></li> 

     </ul> 
    </div> 
    <div class="menu-background"></div> 
</div> 

（內 <ul>標籤可以由定製 <div>包圍，因爲代碼是從一個動態的模塊系統，PHP編寫生成的每個其他的結構變化是困難得多）

的目標是左側爲一個子菜單，而不是在與其他頂級項目上顯示項目1後內<ul> ..

有沒有辦法做到這一點無需修改結構？只是與CSS或如此？

---

UPDATE：

感謝所有的答案！

特別是besluitloos和Caelea，這正是我要找的。

Answer 1

包含第二個<ul>的父代<li>應該相對定位，並且包含的​​<ul>應該位於絕對位置。

Sometihing像：

ul li { position: relative ;} 
ul li ul {position: absolute; top: 0; left: 145px;} 

我寫left: 145px，但你可以給你想要的任何值，這取決於你想要多大你的菜單進行。

PS：提示：不要在這些div上使用相同的「body-menu」類，它應該不同於大容器，而不僅僅是。我並不認爲有必要在那些<li>之內擁有那個div。

Answer 2

.body-menu > ul > li { 
position:relative; 
float:left; 
padding-bottom: 1em; 
} 
.body-menu ul ul { 
position:absolute; 
left:0; 
top:1.3em; 
display:none; 
} 
.body-menu > ul > li:hover > ul { 
display:block; 
} 

這是你在找什麼？

編輯：對不起，IE瀏覽器不能很好地處理內嵌塊。所以你必須將其改爲'內聯'。那麼你可以忽略底部填充，因爲這對內聯元素不起作用。除了浮動元素。編輯上面的代碼以使用float。

編輯2：錯字。

Answer 3

也許你想做一些類似於隱藏子菜單，並使其彈出或鼠標懸停時顯示。以http://cssmenumaker.com/builder/42231爲例。