将子菜单拉伸到父菜单大小

Question

我正在使用 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(); 
  });
});

Answer 1

固定在这里

$(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/

Answer 2

好的，我觉得这应该可以在没有 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) 此外，我注意到当您将鼠标悬停在子菜单上几次时，下拉菜单也会切换几次。注意我在js上这一行添加的stop()：

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

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