[英]How to display dropdown menu slider effect from bottom to top after hover?
我在線性懸停后從下到上顯示下拉菜單滑塊效果,所有下拉文本都應顯示左對齊。 我嘗試了一些代碼,但當我在第一個菜單上徘徊時,我的第二個菜單顯示在右側。你能幫助我嗎?
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;
}
你可以通過應用position: absolute;
到出現的菜單,如下所示:
.main-menu li:hover > ul {
display:block;
position: absolute;
}
我認為你的問題是當懸停第一個菜單時停止第二個菜單向右滑動。 所以將position:absolute屬性添加到下拉菜單以避免第二個菜單滑動。
現在我添加sideDown()和slideUp()來顯示或隱藏菜單上的下拉菜單懸停試試下面的代碼。
//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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.