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

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

1st 你应该删除你的

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

这显然是您的菜单 "scrollable"！

在这里，您的 "submenu" 始终可见...如果您正在寻找一种方法来 show/hide 您的子菜单，那么您应该使用 "bootstrap"，它很简单而且有很多下拉菜单的例子。

如果你想自己做，那么:

尝试识别您的下拉菜单项，给它一个 class 或允许您检查用户是否点击下拉菜单的东西。
然后，在 "click" 上执行 show/hide 下一个列表元素的操作。（jquery 有一个 "toggle()" 功能来完成这种工作）

加载文档时，将所有下拉菜单设置为 display:none。隐藏它们。然后，单击它们，只需对它们使用 toggle() ，或为它们添加一个使它们可见的属性，例如 "active" class.

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

如果你不使用jQuery，那么只需检查这个link：Using Javascript to hide and show drop down menu and text field

更新：

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

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

Removing scrollbar from horizontal navigation with a dropdown menu

html

css

overflow

scrollbar

drop-down-menu