[英]Stretch submenu to parent menu size
I am creating a horizontal dropdown menu with css and javascript. 我正在使用CSS和javascript创建水平下拉菜单。 I have made the menu stretch to the width I want (956 px) and the menu options to spread out in this, but I don't know how to get the submenus as I want them.
我已经将菜单拉伸到想要的宽度(956像素),并且菜单选项在其中展开,但是我不知道如何获得所需的子菜单。 I want each one of them to have the same width as their parent.
我希望他们每个人都拥有与父母相同的宽度。 Anyone who can help me with this?
有人可以帮助我吗?
HTML: 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: 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: JavaScript的:
$(document).ready(function() {
$('.dropmenu').hover(function() {
$(this).find('.submenu').slideToggle();
});
});
Fixed here 固定在这里
$(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
});
});
You can see it here http://jsfiddle.net/yb2p8aoj/ 您可以在这里看到它http://jsfiddle.net/yb2p8aoj/
Ok, I feel like this should be solvable without javascript. 好的,我觉得没有javascript应该可以解决。 Here's what I did:
这是我所做的:
(1) Remove position:absolute
from .submenu
(is there a reason why you wanted it there?) (1)从
.submenu
删除position:absolute
(是否有您想要在那里的原因?)
.submenu{
display: none;
list-style: none;
background: #CC0000;
padding: 0;
width: auto;
}
(2) Move the background-color from .dropmenu
to .dropmenu a
(2)将背景色从
.dropmenu
移至.dropmenu a
.dropmenu a {
display: block;
text-decoration: none;
text-align: center;
background-color: #ff5b2e;
}
(3) Additionally, I noticed that when you hover over the submenu several times, the dropdown will toggle several times too. (3)另外,我注意到当您将鼠标悬停在子菜单上几次时,下拉菜单也会切换多次。 Note the
stop()
I added on this line on the js: 请注意我在js的这一行上添加的
stop()
:
$(this).find('.submenu').stop().slideToggle();
Fiddle: http://jsfiddle.net/ouz0q5Lj/1/ 小提琴: http : //jsfiddle.net/ouz0q5Lj/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.