我正在使用CSS和javascript创建水平下拉菜单。我已经将菜单拉伸到想要的宽度（956 px），并且菜单选项在其中展开，但是我不知道如何获得所需的子菜单。我希望他们每个人都拥有与父母相同的宽度。有人可以帮助我吗？
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();
});
});
好的，我觉得没有javascript应该可以解决。这是我所做的：
（1）position:absolute从中删除.submenu（您是否有理由要在那里？）
.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();
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句