帶子菜單的HTML水平滾動導航欄

我有一個內部網頁，它有一個大的導航欄，如果用戶有一個小型監視器，導致子菜單顯示在屏幕之外。我的想法是使用導航欄滾動，但是當我使用CSS中的溢出時，當子菜單打開時會出現垂直滾動條。我希望子菜單顯示包含導航欄的div的OUTSIDE。我願意接受所有想法，包括必要時重新整理我的網頁。帶子菜單的HTML水平滾動導航欄

樣本HTML是：

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="scrollmenu"> 
        <li class="menu-item dropdown dropdown-submenu"> 
         <a href="#" id="" role="button" data-toggle="dropdown">Some Text</a> 
           <ul class="dropdown-menu"> 
            <li class="menu-item dropdown dropdown-submenu"> 
             <a href="#" id="" role="button" data-toggle=""></a> 
             <ul class="dropdown-menu scrollable-menu"> 
              <li class="menu-item"> 
               <a id="" class="pdf" href="#"></a> 
               <a id="" class="pdf" href="#"></a> 
               <a id="" class="pdf" href="#"></a> 
               <a id="" class="pdf" href="#"></a> 
               <a id="" class="pdf" href="#"></a> 
              </li> 
             </ul> 
            </li> 
        </li> 
       </div> 
      </div> 
</div>

而且我使用的CSS是（我發現這W3schools.com CSS）：

div.scrollmenu { 
    background-color: #333; 
    overflow: auto; 
    white-space: nowrap; 
    width: 50%; 
} 

div.scrollmenu a { 
    display: inline-block; 
    /*color: white;*/ 
    text-align: center; 
    padding: 14px; 
    text-decoration: none; 
} 

div.scrollmenu a:hover { 
    background-color: #777; 
}

我遇到的問題是，在爲了得到滾動條，我必須使用CSS中的overflow：auto設置。但是當我這樣做時，它會導致子菜單出現在同一個div中，導致在顯示子菜單時出現垂直滾動條。如果沒有溢出設置，子菜單將顯示在所需行爲的div之外;但是，當然，滾動條不會出現。

請幫忙。

僅供參考，我準備在週末回家，並在週一跟進。

在此先感謝。

來源

2017-08-11 CuriousOne

你爲什麼不使用媒體查詢？ –

好主意，但我不會跑遍同一個問題，除非我完全重新編寫了小屏幕導航欄？ – CuriousOne

您是否正在製作移動友好的內聯網頁？如果沒有，那麼您對此有多少更小的屏幕？ –

滾動導航欄不是一個帶有子菜單的導航欄的好設計。我們決定將導航欄更改爲Accordion的導航風格。

來源

2017-08-24 12:33:50 CuriousOne

帶子菜單的HTML水平滾動導航欄

回答

相關問題