Question

我有一个导航栏，我正在水平滚动，并在悬停时显示子元素。

但是，一旦显示子元素，我就可以向下滚动。任何人都知道如何防止这种情况，所以悬停（子列表）显示在我的div之外？

这是我的HTML：

<body>
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li>
          <span>Dropdown 1</span>
          <ul>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
            <li><a href="#">Sublink 4</a></li>
            <li><a href="#">Sublink 5</a></li>
            <li><a href="#">Sublink 6</a></li>
            <li><a href="#">Sublink 7</a></li>
            <li><a href="#">Sublink 8</a></li>
            <li><a href="#">Sublink 9</a></li>
          </ul>
        </li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#">Link 8</a></li>
        <li><a href="#">Link 9</a></li>
        <li>
          <span>Dropdown 2</span>
          <ul>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
            <li><a href="#">Sublink 4</a></li>
            <li><a href="#">Sublink 5</a></li>
            <li><a href="#">Sublink 6</a></li>
            <li><a href="#">Sublink 7</a></li>
            <li><a href="#">Sublink 8</a></li>
            <li><a href="#">Sublink 9</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <p>Desire is to have nav bar scrollable horizontally and drop downs that aren't cut - possible without JavaScript?</p>
  </div>
</body>

Answer 1

只是＆＃34;概念验证＆＃34;，但请尝试此fiddle

它确实：

保留导航项目＆＃39;与父母相关的子女
显示页面contnet上的下拉列表

它没有：

将滚动条保持在导航栏的正下方（而不是在页面内容的下方）

<强>概括：

{{1}}

它有点伪造你正在寻找的东西。

Answer 2

该问题与父元素上的position: relative有关。如果将其添加到直接父<li>，则绝对定位的子元素将嵌套在<li>周围的所有容器中。但是，如果您只将position: relative添加到.container，那么绝对元素将显示在容器之外。

看到这个分叉的小提琴：http://jsfiddle.net/tnp7hmqv/1/

子链接现在应该出现在容器的顶部。

Answer 3

不确定这是否是你想要的。我在http://www.bootply.com/l2ChB4vYmC

在线发现了这个问题

该解决方案显示了如何在导航栏上创建切换侧按钮。

我认为构建如此长的导航栏需要javascript工作。

CSS Only水平滚动方法

3 个答案: