I'm currently working on a drop-down navigation bar, and I've encountered an issue. Check out the code here
My goal is to have the navigation container's height adjust dynamically when a user hovers over a menu item with children items. While I have achieved this functionality, the problem lies in the hovered item expanding in width to accommodate all its content. How can I prevent this from happening?
This is the HTML code snippet I am using:
<div class="container" id="menu-container">
<ul class="main-menu clearfix">
<li class="dropdown"><a href="">Shop</a>
<ul class="menu">
<li class="dropdown float-child-to-right"><a href="">Filter by</a>
<ul class="menu float-to-right">
<li class="dropdown"><a href="">Products</a>
<ul class="menu block-element">
<li><a href="">Guestbooks</a></li>
<li><a href="">Notebooks</a></li>
</ul>
</li>
<li class="dropdown block-element"><a href="">Collections</a>
<ul class="menu">
<li><a href="">Handle it</a></li>
<li><a href="">Tuff Love</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contacts</a></li>
</ul>
<div class="clear"></div>
CSS styling applied:
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.container {
border-bottom: #dedede 1px solid;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.main-menu li {
float: left;
min-width: 100px;
}
.block-element li {
float: none;
display: block;
}
.float-to-right {
float: right;
}
.main-menu li ul {
/*display: none;*/
}
.main-menu > ul {
position: relative;
}
Here is the JavaScript used:
(function($){
$.fn.recurse = function (_this, _parent_dropdowns ) {
_parent_dropdowns.each(function () {
$(this).mouseover(function ( event ) {
var _uls = $(this).children('ul.menu');
_uls.each( function () {
//has float-to-right class
if ($(this).hasClass('float-to-right')) {
}
});
$(this).children('ul.menu').css({ display: 'block' });
});
$(this).mouseleave( function ( event ) {
event.preventDefault();
event.stopPropagation();
_this.children('li').find('ul.menu').each( function () {
$(this).css({ display: 'none' });
});
});
_this.recurse(_this, _parent_dropdowns.find('li.dropdowns'))
});
}
$.fn.menufy = function () {
return this.each(function () {
var _parent_menu = $(this);
var _parent_dropdowns = _parent_menu.find('li.dropdown');
_parent_menu.recurse(_parent_menu, _parent_dropdowns);
});
}
})(jQuery);
jQuery(document).ready(function ($) {
$('.main-menu').menufy();
});
Your assistance on this matter would be greatly appreciated!