滚动时带有子菜单下拉菜单的水平CSS菜单未对齐

时间：2018-08-22 14:53:23

标签： html css twitter-bootstrap menu

我有一个水平的CSS菜单，其中每个菜单选项都有一个子菜单。这将按预期工作，直到菜单设置了溢出并且用户滚动为止。我相信这是因为子菜单设置为position：fixed。我可以将其更改为position：absolute，但是子菜单位于父级滚动条的后面。有谁知道如何解决此问题，使其在不需要滚动时可以正常工作？

窗口最大化（无需滚动）： enter image description here

窗口缩小（需要滚动）： enter image description here

绝对位置： enter image description here

菜单的示例标记：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
html {
    width: 100%;
    height: calc(100% - 28px);
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

body {
    font-family: Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 12px !important;
    color: #787878 !important;
}

.navbar-default {
    background-image: none !important;
    background-color: black !important;
    border: black;
}

    .navbar-default .navbar-brand {
        color: white !important;
    }

.navbar-default .navbar-nav > .active {
    color: #000;
    background: rgba(189, 189, 189, 1);
}

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        color: #000;
        background: rgba(189, 189, 189, 1);
    }

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a {
        color: #555;
        background-color: rgba(189, 189, 189, 1) !important;
        background-image: none !important;
        box-shadow: none !important;
    }

#module-nav .navbar-nav > li > a {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

#module-nav .navbar-nav > li {
    margin-right: 25px;
    font-weight: bold;
}

#module-nav .navbar-nav > li {
    padding: 10px !important;
    background-image: none !important;
}

/* NavBar Sub Menu http://bootsnipp.com/snippets/featured/multi-level-navbar-menu */
.dropdown-submenu {
    position: relative;
    width: 100%;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 0px;
            -moz-border-radius: 6px 0 6px 0px;
            border-radius: 6px 0 6px 0px;
        }

#navbarCollapse {
    height: 40px !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: #7ea700;
    background-image:none !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > a:hover {
    color: black !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    color: black !important;
}


ul.multiselect-container > li {
    min-height: 1.8em !important;
}

#navigation {
    width: calc(100% - 195px);
    white-space: nowrap !important;
    display: inline-block;
    overflow: auto;
    overflow-y:hidden;
    
}

#navigation li{
    display: inline-block;
    float:none !important;
}

#icon-navbar{
    width: 195px;
    /*margin-top: 10px*/
}



.dropdown-menu{
    position: fixed;
    left: auto;
    top: auto;
}


    .dropdown-menu.multi-level ul {
        margin-left: 158px;
        margin-top: -28px;
        left: auto;
        top: auto;
    }

    .dropdown-menu.multi-level > li {
        display: block !important;
    }
    .dropdown-menu.multi-level ul>li {
        display: block !important;
    }
<nav id="module-nav" role="navigation" class="navbar navbar-default navbar-fixed-top" style="margin-bottom:5px; margin-top:50px; background-color:#e2e2e2 !important; border:none !important; min-height:10px !important; z-index:98">

  <div id="navbarCollapse" class="collapse navbar-collapse" style="padding:0px;">
    <div style="overflow:hidden">
      <ul id="navigation" class="nav navbar-nav navbar-left scrollbar-inner" style="position:absolute;">
        <li class="active"><a href="/">Home</a></li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 1<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li><a href="/Menu 1" style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 1</a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 2<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 2</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 3<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 3</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 4<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 4</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 5<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 5</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 6<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 6</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 7<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 7</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 8<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 8</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 9<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 9</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Option 10<b class="caret"></b></a>
          <ul class="dropdown-menu multi-level" style="background-color:whitesmoke">
            <li class="dropdown-submenu">
              <a href='#' style="color:#777; font-size:12px; font-weight:bold;" class="dropdown-toggle" data-toggle="dropdown">Menu Option 10</a>
              <ul class="dropdown-menu" style="background-color:whitesmoke">
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 1</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 2</a></li>
                <li><a href="/" style="color:#777; font-size:12px; font-weight:bold; ">Sub Menu Option 3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

0 个答案:

没有答案
相关问题
最新问题