CSS只能水平滚动的方法

我有一个导航栏，我正在水平滚动并在悬停上显示子元素。CSS只能水平滚动的方法

然而，一旦子元素都显示我是那么能向下滚动。任何人都知道如何防止这个悬停（子列表）显示在我的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>

来源

2015-08-14 Snoopies

只是一个“概念验证”，但试试这个fiddle

它：

保持连接到母体的导航项目儿童
显示的下拉菜单在页面contnet

它并不：

保持滚动条立即导航栏下方（而不是它的页面的内容如下）

回顾：

<body> 
    <div class="container">   <!-- positioned relatively so children 
             namely .non-scrolling-container 
             can be attached to it --> 
    <div class="fake-scroll-area"> <!-- scroll is applied to this --> 
     <nav>      <!-- scrolls with .fake-scroll-area --> 
     <!-- nav contnet --> 
     </nav> 
     <div class="non-scrolling-content"> <!-- positioned absolutely 
               with respect to .container --> 
     <!-- where normal page stuffgoes --> 
     </div> 
    </div> 
    </div> 
</body>

这样的假货，你在找什么。

来源

2015-08-14 20:53:38 user3276552

不知道这是否是你想要的。我发现这在线http://www.bootply.com/l2ChB4vYmC

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

建设这样长的导航栏将需要javascript的工作，我认为。

来源

2015-08-14 20:29:01 mancube

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

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

的子链路现在应该出现在容器上。

来源

2015-08-14 20:50:30 Andrew

CSS只能水平滚动的方法

回答

相关问题