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只能水平滾動的方法

回答

相關問題