html - 调整 Bootstrap 导航栏菜单高度

标签 html css twitter-bootstrap twitter-bootstrap-3

我正在 bootstrap 中开发一个多行菜单，我使用了一个 bootstrap css 类“nav-justified”来实现每个菜单的宽度相等。 “nav-justified”类对于等宽效果很好。但我需要另一个高度相等的选项，保持该部分中每个菜单的高度相等。我在下面以图形方式添加了我的问题: enter image description here 

    nav.navbar {
      width: 100%;
      border: none;
      margin: 0;
      padding: 0;
      background: #adadad;
      border-bottom: 1px solid #8e8e8e
      /*#8e8e8e*/
      ;
    }
    nav.navbar-fixed-top {
      height: 150px;
      position: fixed;
      margin-left: 5px;
      margin-right: 5px;
      top: 26px;
      bottom: 0;
      right: 0;
      left: 0;
      float: none;
      padding: 5px 5px 0px 5px;
      background: #adadad;
      /*mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #202020 25%, #202020 75%, rgba(255, 255, 255, 0) 100%);*/
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
    }
    nav .container-fluid {
      padding-right: 0px;
      padding-left: 0px;
      height: 100%;
    }
    .navbar-header .navbar-toggle .icon-bar {
      background-color: black;
    }
    ul.top-menu {
      /*width: 100%;*/
      border: none;
      margin: 0px 0px 0px 0px;
      padding: 0;
      /*height: 44px;*/
      border-bottom: 1px solid #bbbbbb;
      border-radius: 6px;
      background: #5c5a5a;
      /* Safari 4-5, Chrome 1-9 */
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5c5a5a), to(#3d3b3b));
      /* Safari 5.1, Chrome 10+ */
      background: -webkit-linear-gradient(top, #3d3b3b, #5c5a5a);
      /* Firefox 3.6+ */
      background: -moz-linear-gradient(top, #3d3b3b, #5c5a5a);
      /* IE 10 */
      background: -ms-linear-gradient(top, #3d3b3b, #5c5a5a);
      /* Opera 11.10+ */
      background: -o-linear-gradient(top, #3d3b3b, #5c5a5a);
      vertical-align: middle;
      background: #353535;
      /* Old browsers */
      background: -moz-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(50%, #5c5a5a), color-stop(100%, #303030));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, #353535 0%, #5c5a5a 50%, #303030 100%);
      /* W3C */
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#303030', GradientType=0);
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
    }
    ul.top-menu > li.active {
      background: #ff0000;
      /* Safari 4-5, Chrome 1-9 */
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6f0505), to(#ff0000));
      /* Safari 5.1, Chrome 10+ */
      background: -webkit-linear-gradient(top, #ff0000, #6f0505);
      /* Firefox 3.6+ */
      background: -moz-linear-gradient(top, #ff0000, #6f0505);
      /* IE 10 */
      background: -ms-linear-gradient(top, #ff0000, #6f0505);
      /* Opera 11.10+ */
      background: -o-linear-gradient(top, #ff0000, #6f0505);
      outline: none;
    }
    ul.top-menu > li:last-child.active {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    ul.top-menu > li:first-child.active {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    ul.top-menu > li:hover {
      cursor: pointer;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
    }
    ul.top-menu > li:last-child:hover {
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }
    ul.top-menu > li:first-child:hover {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
    }
    ul.sub-menu {
      /*width: 100%;*/
      border: none;
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }
    ul.sub-menu > ul > li {
      display: block;
      /*width: 100%;*/
      border: none;
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }
    ul.sub-menu > li > ul > li > a {
      text-align: left;
      vertical-align: middle;
      /*height: auto;*/
      /*width: 100%;*/
      color: #101010;
      font-size: 10pt;
      white-space: nowrap;
      text-transform: capitalize;
      text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.9);
    }
    ul.sub-menu > li > ul > li > a:hover {
      cursor: pointer;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
      color: #000;
    }
    ul.dropdown-menu {
      margin-top: -2px;
      /*position:relative;*/
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    li.dropdown:hover > ul.dropdown-menu {
      display: block;
    }
    .dropdown-submenu {
      position: relative;
    }
    .dropdown-submenu > .dropdown-menu {
      top: 0px;
      left: 100%;
      margin-top: -1px;
      margin-left: -1px;
      box-sizing: border-box;
    }
    .dropdown-submenu:hover > .dropdown-menu {
      display: block;
    }
    .dropdown-submenu > a:after {
      display: block;
      content: " ";
      float: right;
      width: 0;
      height: 0;
      border-color: transparent;
      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 6px;
      -moz-border-radius: 6px 0 6px 6px;
      border-radius: 6px 0 6px 6px;
    }
    .dropdown-menu > ul > ul {
      border-radius: 0px;
      width: 100%;
    }
    .dropdown-menu > li > a {
      display: block;
      padding: 5px 20px;
      clear: both;
      font-weight: normal;
      line-height: 1.42857143;
      color: #101010;
      font-size: 10pt;
      white-space: nowrap;
      text-transform: capitalize;
      width: 100%;
    }
    .dropdown-menu > li > a:hover {
      background: #ff0000;
    }
    .dropdown-menu > li {
      /*box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);*/
      box-sizing: border-box;
      border-bottom: 0.5px solid #d5d5d5;
      border-top: 0.5px solid #f9f9f9;
      border-radius: 0px;
      min-width: 260px;
      width: 100%;
      background: #f2f2f2;
      text-align: left;
    }
    .dropdown-menu > ul > li > a {
      box-sizing: border-box;
      border-radius: 0px;
      width: 100%;
    }
    .dropdown-toggle > i {
      text-align: right;
      right: 10px;
      position: absolute;
      overflow: hidden;
      line-height: 1.42857143;
    }
    .dropdown-menu > li.manage-bar {
      background: #bbbbbb;
    }
    .dropdown-menu > li.manage-bar a {
      color: #101010;
    }
    .dropdown-menu > li.report-bar {
      background: #bbbbbb;
    }
    .dropdown-menu > li.report-bar a {
      color: #101010;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="btn btn-primary navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--<a class="navbar-brand" href="#">Brand</a>-->
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="menu-navbar-collapse-1">
      <ul class="nav nav-justified top-menu">
        <li class="active">
          <a href="#">HOME</a>
        </li>
        <li>
          <a href="#">GARMENTS</a>
        </li>
        <li>
          <a href="#">YARN DYEING</a>
        </li>
        <li>
          <a href="#">KNITTING</a>
        </li>
        <li>
          <a href="#">FABRIC DYEING</a>
        </li>
        <li>
          <a href="#">COMMON MODULES</a>
        </li>
        <li>
          <a href="#">GENERAL SETTING</a>
        </li>
      </ul>
      <ul class="nav nav-justified">
        <li>
          <ul class="nav nav-justified" style="border: 1px solid #f00">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">ADMIN                                                             <span class="caret"></span>
                      </a>
              <ul class="dropdown-menu" role="menu">
                <li>
                  <a href="#">Action</a>
                </li>
                <li>
                  <a href="#">Another action</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav nav-justified" style="border: 1px solid #f00">
            <li>
              <a href="#">HELP</a>
            </li>
          </ul>
        </li>
        <li>
          <ul class="nav nav-justified">
            <li>
              <a href="#">SUPPORT</a>
            </li>
          </ul>
          <ul class="nav nav-justified">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">CHAT                                                            <span class="caret"></span>
                      </a>
              <ul class="dropdown-menu" role="menu">
                <li>
                  <a href="#">Action</a>
                </li>
                <li>
                  <a href="#">Another action</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <ul class="nav nav-justified">
            <li>
              <a href="#">NO MENU</a>
            </li>
          </ul>
          <ul class="nav nav-justified">
            <li>
              <a href="#">NO MENU</a>
            </li>
          </ul>
        </li>
        <li>
          <ul class="nav nav-justified">
            <li>
              <a href="#">NO MENU</a>
            </li>
          </ul>
          <ul class="nav nav-justified">
            <li>
              <a href="#">NO MENU</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

编辑=========================================== =======

我已经在 plunker 中解决了这个问题

但另一个问题是 bootstrap dropdown popup 在 IE 中无法正常出现，如下所示 enter image description here

我需要这个解决方案，它适用于 chrome 和 mozila，我的问题是什么？ enter image description here

最佳答案

完整的解决方案在这里

HTML 代码

 

html {
    font-size: 10px;
    position: relative;
    min-height: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body {
    overflow-x: hidden;
    height: 100%;
    margin: 0;
}

body {
    background: #efeff0 /*url('../img/background.jpg') no-repeat*/;
    background-size: cover;
    background-attachment: fixed;
    /*font: 300 16px 'segoe', Helvetica, Arial, sans-serif;*/
    background-color: #efeff0;
    color: #303030;
    font-family: segoe,"Helvetica Neue",Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857;
    height: 100%;
    width: 100%;
    position: absolute;
    /*border:5px solid #5f5f5f;*/
    overflow: hidden;
}



/* Customize the nav-justified links to be fill the entire space of the .navbar */

.navbar-header .navbar-toggle .icon-bar {
    background-color: black;
}

.nav-justified > li > a {
    color: inherit;
}

.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
    background-image: none;
    background: none;
    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}

.nav-justified > li:first-child > a {
    /*border-radius: 5px 5px 0 0;*/
}

.nav-justified > li:last-child > a {
    /*border-bottom: 0;
        border-radius: 0 0 5px 5px;*/
}

.nav-justified > li > a:hover {
    background: none;
    background-image: none;
}

.nav > li > a {
    padding: 5px 10px 0px 20px;
}

@media (min-width: 768px) {
    /*.nav-justified {
        max-height: 52px;
    }*/

    .nav-justified > li > a {
        border-right: 0.5px solid #404040;
        border-left: 0.5px solid #353535;
        color: #fff;
        text-align: left;
    }

    .nav-justified > li:first-child > a {
        border-left: 0;
        border-radius: 6px 0 0 6px;
    }

    .nav-justified > li:last-child > a {
        border-right: 0;
        border-radius: 0 6px 6px 0;
    }
}

.navbar-collapse {
    border-top: 0px solid #4b4b4b;
    /*padding:0px 5px 0px 5px;*/
}
/*.navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    padding: 5px 5px 0px 5px;
}*/
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin: 0px 5px 0px 5px;
}

nav.navbar-fixed-top {
    height: 150px;
    position: fixed;
    top: 26px;
    bottom: 0;
    right: 0;
    left: 0;
    float: none;
    background: #adadad;
    /*mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #202020 25%, #202020 75%, rgba(255, 255, 255, 0) 100%);*/
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
}

.navbar-fixed-top, .navbar-fixed-bottom {
    position: relative;
}

nav .container-fluid {
    padding-right: 0px;
    padding-left: 0px;
    overflow: visible;
}

nav.navbar {
    /*display: block;*/
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    background: #adadad;
    border-bottom: 1px solid #8e8e8e /*#8e8e8e*/;
}

ul.top-menu {
    width: 100%;
    border: none;
    margin: 5px 0px 0px 0px;
    padding: 0;
    min-height: 44px;
    border-bottom: 1px solid #bbbbbb;
    border-radius: 6px;
    background: #5c5a5a;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5c5a5a), to(#3d3b3b));
    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #3d3b3b, #5c5a5a);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #3d3b3b, #5c5a5a);
    /* IE 10 */
    background: -ms-linear-gradient(top, #3d3b3b, #5c5a5a);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #3d3b3b, #5c5a5a); /*box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
    -o-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
    -ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);*/
    vertical-align: middle;
    background: #353535; /* Old browsers */
    background: -moz-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(50%, #5c5a5a), color-stop(100%, #303030)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #353535 0%, #5c5a5a 50%, #303030 100%); /* IE10+ */
    background: linear-gradient(to bottom, #353535 0%, #5c5a5a 50%, #303030 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#303030', GradientType=0 ); /* IE6-9 */
    /*background:url(NEXTIT.CK.GS.WebClient/Content/images/admin-logo.png) #fff;*/
    /*mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #202020 25%, #202020 75%, rgba(255, 255, 255, 0) 100%);*/
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6); /*background:white;
  background:rgba(255,255,255,0.8);*/
    /*filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);*/
}

    ul.top-menu > li > a {
        color: #fff;
        font-weight: normal;
    }


    ul.top-menu > li.active {
        background: #ff0000;
        /* Safari 4-5, Chrome 1-9 */
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6f0505), to(#ff0000));
        /* Safari 5.1, Chrome 10+ */
        background: -webkit-linear-gradient(top, #ff0000, #6f0505);
        /* Firefox 3.6+ */
        background: -moz-linear-gradient(top, #ff0000, #6f0505);
        /* IE 10 */
        background: -ms-linear-gradient(top, #ff0000, #6f0505);
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #ff0000, #6f0505);
        outline: none;
    }

    ul.top-menu > li:last-child.active {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    ul.top-menu > li:first-child.active {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

    ul.top-menu > li:hover {
        /*background-color: #f00;*/
        /*border-radius:6px;*/
        /*background:rgba(255, 255, 255, 0.2);*/
        cursor: pointer;
        /*background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.5) 50%, rgba(0,0,0,0.2) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(50%,rgba(255,255,255,0.2)), color-stop(100%,rgba(0,0,0,0.2))); 
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%); 
background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%); 
background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%); 
background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0.2) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#33000000',GradientType=0 ); 
-webkit-box-shadow: inset 5px rgba(0,0,0,.2), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 5px rgba(0,0,0,.2), 0 0 8px rgba(102, 175, 233, 0.6);*/
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
    }

    ul.top-menu > li:last-child:hover {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    ul.top-menu > li:first-child:hover {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
    }

ul.sub-menu {
    width: 100%;
    height: 100px;
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    list-style: none;
    display: block; /*box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
	-o-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);
	-ms-box-shadow: 2px 2px 2px rgba(0,0,0,0.40);*/
}

    ul.sub-menu > li {
        height: 100px;
        border: none;
        margin: 0;
        padding: 0;
        vertical-align: middle;
        list-style: none;
    }

        ul.sub-menu > li > div {
            height: 100%;
            display: table;
            table-layout: fixed;
            border-collapse: collapse;
            width: 100%;
        }

            ul.sub-menu > li > div > ul {
                display: table-row;
            }

                ul.sub-menu > li > div > ul > li {
                    display: table-cell;
                    width: 100%;
                    border: none;
                    margin: 0;
                    padding: 0;
                    vertical-align: middle;
                    padding-left: 20px;
                    height: auto;
                }

                    ul.sub-menu > li > div > ul > li > a {
                        text-align: left;
                        text-decoration: none;
                        height: 100%;
                        line-height: 100%;
                        display: table;
                        content: "";
                        clear: both;
                        vertical-align: middle;
                        width: 100%;
                        color: #101010;
                        font-size: 10pt;
                        white-space: nowrap;
                        text-transform: capitalize;
                        text-shadow: 1px 1px 1px rgba(200,200,200,0.9);
                        padding: 0px;
                    }

                        ul.sub-menu > li > div > ul > li > a > span {
                            line-height: 100%;
                            display: table-cell;
                            vertical-align: middle;
                            clear: both;
                        }

                            ul.sub-menu > li > div > ul > li > a > span i {
                                float: right;
                                margin-right: 14px;
                                content: "";
                                clear: both;
                                /*margin-top: -18px;
    right: 10px;
    text-align: right;*/
                            }

                        ul.sub-menu > li > div > ul > li > a:hover {
                            background: none;
                        }

                    ul.sub-menu > li > div > ul > li:hover {
                        cursor: pointer;
                        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
                        /*-webkit-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow:0px 1px 1px rgba(0, 0, 0, 0.1);*/
                        box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
                        color: #000;
                    }

/*ul.sub-menu > li > div > ul > li.dropdown > ul.dropdown-menu {
                        top: 100%;
                    }*/

ul.dropdown-menu {
    width: 100%;
    margin: 0;
    padding: 0;
}

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

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0px;
        left: 100%;
        margin-top: -2px;
        margin-left: -1px;
        /*-webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;*/
        /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
        box-sizing: border-box;
    }

    .dropdown-submenu > .dropToLeft {
        left: auto;
        right: 100%;
        top: 0px;
        /*position:relative;*/
    }

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

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        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 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

.dropdown-menu > ul > ul {
    border-radius: 0px;
    width: 100%;
}

.dropdown-menu > li > a {
    display: block;
    padding: 5px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #101010;
    font-size: 10pt;
    white-space: nowrap;
    text-transform: capitalize;
    width: 100%;
}

    .dropdown-menu > li > a:hover {
        background: #ff0000;
    }

.dropdown-menu > li:hover {
    background: #ff0000;
}

.dropdown-menu > li {
    /*box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);*/
    box-sizing: border-box;
    border-bottom: 0.5px solid #d5d5d5;
    border-top: 0.5px solid #f9f9f9;
    border-radius: 0px;
    width: 100%;
    background: #f2f2f2;
    text-align: left;
}

.dropdown-menu > ul > li > a {
    /*box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);*/
    box-sizing: border-box;
    /*border-bottom:1px solid rgba(0,0,0,0.40);
    border-top:1px solid #ccc;*/
    border-radius: 0px;
    width: 100%;
}

.dropdown-toggle > i {
    text-align: right;
    right: 10px;
    position: absolute;
    overflow: hidden;
    line-height: 1.42857143;
}

.dropdown-menu > li.manage-bar {
    background: #bbbbbb;
}

    .dropdown-menu > li.manage-bar a {
        color: #101010;
    }

.dropdown-menu > li.report-bar {
    background: #bbbbbb;
}

    .dropdown-menu > li.report-bar a {
        color: #101010;
    }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
   <nav class="navbar navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--<a class="navbar-brand" href="#">Brand</a>-->
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="menu-navbar-collapse-1">
            <ul class="top-menu nav nav-justified">
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#">GARMENTS</a></li>
                <li><a href="#">YARN DYEING</a></li>
                <li><a href="#">KNITTING</a></li>
                <li><a href="#">FABRIC DYEING</a></li>
                <li><a href="#">COMMON MODULES</a></li>
                <li><a href="#">GENERAL SETTING</a></li>
            </ul>
            <ul class="sub-menu nav nav-justified">
                <li>
                    <div>
                        <ul>
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>ADMIN <span class="caret"></span></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Manage
                                        <span class="caret"></span>
                                    </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul>
                            <li><a href="#"><span>HELP</span></a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div>
                        <ul>
                            <li><a href="#"><span>HELP</span></a></li>
                        </ul>
                        <ul>
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>CHAT<span class="caret"></span></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>

                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div>
                        <ul>
                            <li><a href="#"><span>NO MENU</span></a></li>
                        </ul>
                        <ul>
                            <li><a href="#"><span>NO MENU</span></a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div>
                        <ul>
                            <li><a href="#"><span>NO MENU</span></a></li>
                        </ul>
                        <ul>
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>ADMIN<span class="caret"></span></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="dropdown-submenu "><a href="#" class="dropdown-toggle" data-toggle="dropdown">Manage <span class="caret"></span></a>
                                        <ul class="dropdown-menu dropToLeft" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li><a href="#">Separated link</a></li>
                                            <li><a href="#">One more separated link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
</body>

</html>

关于html - 调整 Bootstrap 导航栏菜单高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26354103/

上一篇：javascript - 在桌面上查看时如何展开 Bootstrap 3 下拉菜单？

下一篇：html - Chrome CSS Perspective 不适用于所有 block

相关文章：

javascript - 点击错误时展开搜索输入栏

html - 我需要 Logo 与导航栏重叠

html - 如何使用背景大小 : contain on element with responsive height

javascript - 单击按钮时如何设置转换，它从显示 'none' 变为显示 'block'

java - 如何修改html为jsp显示页面以供servlet响应

html - 使 Twitter Bootstrap 列的高度相同

html - Bootstrap Modal 不弹出

javascript - 如何让 shown.bs.modal 在模式使用远程 URL 时触发

jquery - 在 Twitter Bootstrap 2.0 中控制轮播

html - 需要基本的侧面菜单脚本帮助

©2024 IT工具网  联系我们