Hybreeder Hybreeder - 2 months ago 12
jQuery Question

How to display dropdown menu slider effect from bottom to top after hover?

I have display drop down menu slider effect from bottom to top after hover with linearly and all drop down text should be display left align.
I tried some code but when i hovered first menu my second menu displaying on right side.would you help me in this?

HTML

<div class="right-menu-bar">
<ul class="main-menu">
<li><a href="">Menu</a>
<ul>
<li><a href="">menu1 details</a></li>
<li><a href="">menu1 details</a></li>
<li><a href="">menu1 details</a></li>
</ul>
</li>
<li><a href="">Menu</a>
<ul>
<li><a href="">menu1 details</a></li>
<li><a href="">menu1 details</a></li>
<li><a href="">menu1 details</a></li>
</ul>
</li>
</ul>
</div>


CSS

.right-menu-bar ul.main-menu > li
{
float: left;
margin: 15px;
font-size: 16px;
}
li ul
{
list-style: none;
background: #3498db;
z-index: 2;
font-size: 16px;
padding:0 ;

}

li ul li
{

text-transform: capitalize;
}

.main-menu li > ul {
display:none;

}

.main-menu li:hover > ul {
display:block;
}


li ul li a{
text-decoration: none;
color: #fff;
padding: 10px 50px;
display:block;

text-align: left !important;
}

li ul li a:hover{
background-color:#5dade2;
text-decoration: none;
color: #000;
}

Answer

I thought your problem is stop the second menu slide to right when hover the 1st menu. so adding the position:absolute property to dropdown menu to avoid the second menu sliding.

Now I am adding sideDown() and slideUp() to show or hide the dropdown on menu hover Try below code.

	//Hide and Show The Sub Menus
		$(".jquery-test ul li.menu-list").hover(function(){
			$(this).find('ul').stop().slideDown();
		},function(){
			$(this).find('ul').stop(true,true).slideUp();
		});
.jquery-test ul.menu li.menu-list{display:inline-block;padding-right:20px;}
.jquery-test ul{list-style:none;padding-left:10px;}
.jquery-test ul.menu li.menu-list ul.submenu {display:none;}
.jquery-test ul.menu li.menu-list ul.submenu{position:absolute;}
.jquery-test ul.menu li.menu-list ul.submenu li{position:relative;left:0px;}
.jquery-test ul li a{text-decoration:none;color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="jquery-test">
	<ul class="menu">
		<li class="menu-list"><a href="#">Menu1</a>
			<ul class="submenu">
				<li><a href="#">Menu1.0</a></li>
				<li><a href="#">Menu1.1</a></li>
				<li><a href="#">Menu1.2</a></li>
				<li><a href="#">Menu1.3</a></li>
			</ul>
		</li>
		<li class="menu-list"><a href="#">Menu2</a>
			<ul class="submenu">
				<li><a href="#">Menu2.1</a></li>
				<li><a href="#">Menu2.2</a></li>
				<li><a href="#">Menu2.3</a></li>
				<li><a href="#">Menu2.4</a></li>
			</ul>
		</li>
		<li class="menu-list"><a href="#">Menu3</a>
			<ul class="submenu">
				<li><a href="#">Menu3.0</a></li>
				<li><a href="#">Menu3.1</a></li>
				<li><a href="#">Menu3.2</a></li>
				<li><a href="#">Menu3.3</a></li>
			</ul>
		</li>
	</ul>