如何显示下拉菜单滑块效果从下到上悬停后

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

本文关键字：从下到上 悬停 下拉菜单 何显示 显示      更新时间：2023-09-26

我有显示下拉菜单滑块效果从下到上线性悬停后，所有下拉文本应该显示左对齐。我尝试了一些代码，但当我徘徊在第一个菜单我的第二个菜单显示在右侧。你能帮我一下吗?

<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属性来避免第二次菜单滑动。

现在我添加了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>

您可以通过对出现的菜单应用position: absolute;来实现这一点，如下所示:

.main-menu li:hover > ul {
    display:block;
    position: absolute;
}
工作小提琴

相关文章：