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

1你应该删除你的

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

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

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

如果你想自己做，那么：

尝试识别您的下拉菜单项，给它一个类或某些内容，以便您检查用户是否点击了下拉菜单。
然后，在“单击”上，执行显示/隐藏下一个列表元素的操作。（jquery有一个为此类工作制作的“toggle（）”功能）

在文档加载时，使用display：none设置所有下拉菜单。隐藏它们。然后，在单击它们时，只需对它们使用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/

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

1 个答案: