拉伸子菜單到父級菜單大小

我正在用CSS和JavaScript創建水平下拉菜單。我已經將菜單拉伸到了我想要的寬度（956像素）和菜單選項，但我不知道如何獲得子菜單，因爲我需要它們。我希望他們中的每一個都與父母具有相同的寬度。任何人可以幫助我呢？拉伸子菜單到父級菜單大小

HTML：

<div id="nav"> 
    <div id="meny"> 
    <ul id="menu"> 
     <li class="dropmenu"><a href="#">Abcde</a> 
     <ul class="submenu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
     </ul> 
     </li> 
     <li class="dropmenu"><a href="#">Fghijklmn</a> 
     <ul class="submenu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
     </ul> 
     </li> 
     <li class="dropmenu"><a href="#">Shop</a> 
     <ul class="submenu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div>

CSS：

#nav{ 
width: 956px; 
margin-left: auto; 
margin-right: auto; 
} 

#meny{ 
display: table; 
width: 100%; 
border-collapse: collapse; 
border: none; 
} 

#menu{ 
display: table-row; 
list-style: none; 
} 

.dropmenu{ 
display: table-cell; 
background-color: #ff5b2e; 
} 

.dropmenu a{ 
display: block; 
text-decoration: none; 
text-align: center; 
} 

.submenu{ 
display: none; 
list-style: none; 
background: #ff5b2e; 
padding: 0; 
position: absolute; 
} 

.submenu li{ 
width: 100%; 
}

的JavaScript：

$(document).ready(function() { 
    $('.dropmenu').hover(function() { 
    $(this).find('.submenu').slideToggle(); 
    }); 
});

來源

2014-11-05 maraki

好吧，我覺得這應該是沒有的JavaScript解決的。這是我做的：（？是有一個原因，你想它有）

（1）.submenu刪除position:absolute

.submenu{ 
display: none; 
list-style: none; 
background: #CC0000; 
padding: 0; 
width: auto; 
}

（2）將來自.dropmenu的背景色，以.dropmenu a

.dropmenu a { 
display: block; 
text-decoration: none; 
text-align: center; 
background-color: #ff5b2e;  
}

（3）此外，我注意到，當您將鼠標懸停在子菜單上數次時，下拉菜單也會切換多次。注意stop()我加了這條線上的JS：

$(this).find('.submenu').stop().slideToggle();

小提琴：http://jsfiddle.net/ouz0q5Lj/1/

來源

2014-11-05 01:05:09

這似乎是工作好，但是當我將鼠標懸停在菜單中的我的第一個選項，以下兩個選項之間移動一點點在右邊。當我將鼠標懸停在另外兩個人身上時，什麼也沒有發生......不知道爲什麼？ – maraki 2014-11-05 01:28:31

您使用什麼瀏覽器？我沒有看到在我的Chrome瀏覽器 – 2014-11-05 01:29:34

Firefox。我在小提琴中沒有看到它，但是當我從電腦打開它時，它看起來會有所不同......非常奇怪。 – maraki 2014-11-05 01:38:04

這裏固定

$(document).ready(function() { 
    $('.dropmenu').hover(function() { 
    $(this).find('.submenu').toggle(); 
     var width = $(this).css('width'); // find width of sub menu 
     $(this).find('.submenu').css('width', width); // set the width of drop down here 
    }); 
});

你可以在這裏看到它http://jsfiddle.net/yb2p8aoj/

來源

2014-11-05 00:55:19 Ishita

拉伸子菜單到父級菜單大小

回答

相關問題