html - 使用下拉菜单从水平导航中删除滚动条

Question

我有水平导航，其中一个链接有一个下拉菜单。我无法从水平导航中删除垂直滚动条。因此，您必须向下滚动才能看到下拉菜单。如果我删除滚动条，您将看不到下拉菜单。我尝试设置高度，尝试不同的溢出设置，甚至 z-index .. 没有任何效果。 https://jsfiddle.net/83qgv1nb/

   nav.mainNav {
	    margin: 0;
	    padding: 0;
    	width: 75%;
    	float: right;
    	display: block;
	    overflow: auto;
    }

    ul.menu {
    	margin: 0;
    	padding: 0;
    	height: 100px;
    	overflow-y: visible;
    }
    
    li.item {
    	margin: 0;
	    padding: 0;
    	height: 100px;
	    width: 16%;
	    position: relative;
	    float: left;
	    list-style-type: none;
    }
	
	a.navLink {
	    margin: 0;
	    padding: 0;
	    
	    display: block;
	    text-align: center;
	    line-height: 95px;
	    text-decoration: none;
	    font-weight: bold;
    }

    <nav class="mainNav">
	    	<ul class="menu">
			    <li class="item">
			    	<a  href="about.html" class="navLink">About</a>
				    <ul class="sub_menu">
				    	<li class="sub_item">
					    	<a href="#" class="sub_navLink">Location</a>
					    </li>
					    <li class="sub_item">
					    	<a href="#" class="sub_navLink">History</a>
					    </li>
					    <li class="sub_item">
						<a href="#" class="sub_navLink">Community Involvement</a>
					    </li>
					    <li class="sub_item">
						    <a href="#" class="sub_navLink">Leadership</a>
					    </li>
				    </ul>
			    </li>
			    <li class="item"><a  href="services.html" class="navLink">Services</a></li>
		    	<li class="item"><a  href="projects.html" class="navLink">Projects</a></li>
			    <li class="item"><a  href="blank1.html" class="navLink">Blank</a></li>
			    <li class="item"><a  href="blank2.html" class="navLink">Blank</a></li>
		    	<li class="item"><a  href="contact-us.html" class="navLink">Contact</a></li>
		    </ul>
	    </nav>



 
    

Answer 1

第一个你应该删除你的

.mainNav{
    ...
    overflow:auto"
    ...
}

这显然是使您的菜单“可滚动”的原因!

在这里，您的“子菜单”始终可见...如果您正在寻找一种显示/隐藏子菜单的方法，那么您应该使用“bootstrap”，它很简单并且有很多下拉菜单示例。

如果你想自己做，那么:

1. 尝试识别您的下拉菜单项，给它一个类或允许您检查用户是否点击下拉菜单的东西。
2. 然后，在“单击”时执行显示/隐藏下一个列表元素的操作。 (jquery 有一个“toggle()”函数用于此类工作)

在文档加载时，将所有下拉菜单设置为显示:无。隐藏它们。然后，在点击它们时，只需对它们使用 toggle() ，或者为它们添加一个使它们可见的属性，例如“事件”类。

这是一个关于如何使用 jQuery 处理此问题的简短示例:https://jsfiddle.net/83qgv1nb/21/(这只是一个例子，还有很多其他的例子或方法可以做到这一点，我并不是假装我这里的例子是最好的方法!)

如果您不使用 jQuery，那么只需查看此链接:Using Javascript to hide and show drop down menu and text field

更新:

我猜这就是你尝试用 css 做的...:https://jsfiddle.net/83qgv1nb/27/