CSS下拉菜單發出

Question

任何人都可以有一個小問題有所幫助。

我有一個好簡單的CSS下拉菜單

http://www.cinderellahair.co.uk/new/CSSDropdown.html

當你翻轉有孩子這是比內容更廣泛的菜單項我的問題是，它推動了整個右鍵菜單。

除了縮短子菜單的鏈接，有沒有什麼可以調整我的CSS來阻止這種情況的發生？

CSS代碼：

/* General */ 
#cssdropdown, #cssdropdown ul { list-style: none; } 
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; } 
#cssdropdown {padding:43px 0px 0px 0px;} 

/* Head links */ 
#cssdropdown li.headlink { margin:0px 40px 0px -1px; float: left; background-color: #e9e9e9;} 
#cssdropdown li.headlink a { display: block; padding: 0px 0px 0px 5px; text-decoration:none; } 
#cssdropdown li.headlink a:hover { text-decoration:underline; } 

/* Child lists and links */ 
#cssdropdown li.headlink ul { display: none; text-align: left; padding:10px 0px 0px 0px; font-size:12px; float:left;} 
#cssdropdown li.headlink:hover ul { display: block; } 
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px; } 
#cssdropdown li.headlink ul li a:hover { background-color: #333; } 

/* Pretty styling */ 
body { font-family:Georgia, "Times New Roman", Times, serif; font-size: 16px; } 
#cssdropdown a { color: grey; } #cssdropdown ul li a:hover { text-decoration: none; } 
#cssdropdown li.headlink { background-color: white; } 
#cssdropdown li.headlink ul { padding-bottom: 10px;} 

HTML：

<ul id="cssdropdown"> 
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/index.php">HOME</a></li> 
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/gallery/gallery.php">GALLERY</a> 
     <ul> 
      <li><a href="http://amazon.com/">CELEBRITY</a></li> 
      <li><a href="http://ebay.com/">BEFORE &amp; AFTER</a></li> 
      <li><a href="http://craigslist.com/">HAIR TYPES</a></li> 
     </ul> 
    </li> 
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/about-cinderella-hair-extensions/about-us.php">ABOUT US</a> 
     <ul> 
      <li><a href="http://amazon.com/">WHY CHOOSE CINDERELLA</a></li> 
      <li><a href="http://ebay.com/">TESTIMONIALS</a></li> 
      <li><a href="http://craigslist.com/">MINI VIDEO CLIPS</a></li> 
      <li><a href="http://craigslist.com/">OUR HAIR PRODUCTS</a></li> 
     </ul> 
    </li> 
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/news-and-offers/news.php">NEWS &amp; OFFERS</a> 
     <ul> 
      <li><a href="http://amazon.com/">VERA WANG FREE GIVEAWAY</a></li> 
      <li><a href="http://ebay.com/">CINDERELLA ON TV</a></li> 
      <li><a href="http://craigslist.com/">CINDERELLA IN THE PRESS</a></li> 
      <li><a href="http://craigslist.com/">CINDRELLA NEWSLETTERS</a></li> 
     </ul> 
    </li> 
    <li class="headlink"><a href="http://www.cinderellahair.co.uk/new/cinderella-salon/salon-finder.php">SALON FINDER</a></li> 


</ul> 

JS代碼：

$(document).ready(function(){ 
    $('#cssdropdown li.headlink').hover(
     function() { $('ul', this).css('display', 'block'); }, 
     function() { $('ul', this).css('display', 'none'); }); 
}); 

的完整代碼上面的鏈接，只查看源。

Answer 1

DEMO：http://jsbin.com/owuqe/edit

你需要設置UL菜單位置這樣

容器UL

<ul id="cssdropdown" style="position:relative"> 

所有內部UL

<ul style="position:absolute">