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

Question

我有水平导航，其中一个链接有一个下拉菜单。我无法从水平导航中删除垂直滚动条。因此，您必须向下滚动才能看到下拉列表。如果我删除滚动条，您将看不到下拉菜单。我尝试设置高度，尝试不同的溢出设置，甚至z索引。没有任何效果。 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，则只需检查此链接：使用Javascript隐藏和显示下拉菜单和文本字段

更新：

这就是你尝试用css做的事情，我想... ： https://jsfiddle.net/83qgv1nb/27/