I currently have a menu system in place, which is quite simple, but there is an issue where the submenu items are larger than the top-level items. When hovering over the submenu items, the top-level menu expands to accommodate them.
Is there a way to keep the width of the top-level menu items fixed (since they are assigned a width through JS in a different section of the project) and have the submenu items displayed underneath regardless of their size, without affecting the top-level items?
Another problem is that the submenu items seem to be flashing on and off individually when hovered over, causing a flickering effect on the screen.
var auth_width = $("#nav > ul:nth-child(3) > li:nth-child(2)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(2)").css("width", auth_width);
var cart_width = $("#nav > ul:nth-child(3) > li:nth-child(3)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(3)").css("width", cart_width);
var country_width = $("#nav > ul:nth-child(3) > li:nth-child(4)").outerWidth();
$("#nav > ul:nth-child(3) > li:nth-child(4)").css("width", country_width);
$("#nav > ul > li").unbind("mouseover").bind("mouseover", function(){
$(this).find("ul").fadeIn();
});
$("#nav > ul > li").unbind("mouseout").bind("mouseout", function(){
$(this).find("ul").fadeOut();
});#nav{
float:right;
}
#nav > ul > li {
display:inline-block;
list-style:none;
vertical-align:top;
}
#nav > ul > li > ul{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li>
Item 1
</li>
<li>
Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>
Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>Sub Item 1</li>
</ul>
</li>
</ul>
</div>Edit
I have added this section to clarify that the widths of the top-level menu items are actually being set in another part of the script.
I require these widths to remain consistent and for the entire element to be floated to the right.