带子菜单的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之外;但是，当然，滚动条不会出现。

请帮忙。

仅供参考，我准备在周末回家，并在周一跟进。

在此先感谢。

你为什么不使用媒体查询？ –

好主意，但我不会跑遍同一个问题，除非我完全重新编写了小屏幕导航栏？ – CuriousOne

您是否正在制作移动友好的内联网页？如果没有，那么您对此有多少更小的屏幕？ –

答

滚动导航栏不是一个带有子菜单的导航栏的好设计。我们决定将导航栏更改为Accordion的导航风格。

带子菜单的HTML水平滚动导航栏

相关推荐