javascript - Stretch submenu to parent menu size -

javascript - Stretch submenu to parent menu size -

i creating horizontal dropdown menu css , javascript. have made menu stretch width want (956 px) , menu options spread out in this, don't know how submenus want them. want each 1 of them have same width parent. can help me this?

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(); }); });

ok, sense should solvable without javascript. here's did:

(1) remove position:absolute .submenu (is there reason why wanted there?)

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

(2) move background-color .dropmenu .dropmenu a

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

(3) additionally, noticed when hover on submenu several times, dropdown toggle several times too. note stop() added on line on js:

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

fiddle: http://jsfiddle.net/ouz0q5lj/1/

javascript jquery html css drop-down-menu