導航欄被撕開

Question

我的腳本有問題。

主要的問題是，<ul>一旦出現它撕裂導航系統。

紅色部分是「子」 - <ul>與鏈接它實際上應該顯示在ul li的右側，並保留導航，如左圖所示。

有人能幫我嗎？

http://jsfiddle.net/rTDzk/

和jQuery的：

function nav() { 
    $('ul li').mouseover(function() { 
     $(this).find('.submenu').show(); 
    }); 
    $('ul li').mouseleave(function() { 
     $('ul li .submenu').hide(); 
    }); 
    $('ul li .submenu').mouseleave(function() { 
     $('ul li .submenu').hide();; 
    }); 
}; 

$(document).ready(function() { 
    nav(); 
}); 

的HTML碼：

<ul class="noBullet"> 
    <li><a href="#home">home</a> 

    </li> 
    <li><a href="#lager">lager</a> 
     <ul class="submenu"> 
      <li><a href="http://www.mashable.com">Mashable</a> 
      </li> 
      <li><a href="http://www.cnet.com">CNET</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#anlaesseN">anlaesseN</a> 

    </li> 
    <li><a href="#images">images</a> 

    </li> 
</ul> 

更新：

確定這jsfiddle下面工作，但現在看起來像這樣

Answer 1

這只是一個CSS問題。

下面一起來看看：

.noBullet > li { position: relative; } 
.submenu { 
    position: absolute; 
    width: 100px; 
    background: #FFFFFF; 
    border:1px solid #000000; 
    z-index: 1000; 
    list-style-type: none; 
    display: none; 
    left:100px; 
    top: 0; 
} 

Updated JSFiddle

我不知道你爲什麼者優先它是相對的，但是當你放置它絕對變得更容易和更易於管理。

第二個版本：

.noBullet { position: relative; } 

Updated JSFiddle