Bootstrap - 当我在导航栏上添加带滚动箭头的滑动菜单时出现问题

Question

您好我正在使用bootstrap导航栏。由于我有很多菜单，我想添加左和右导航栏的右箭头。我添加了箭头＆amp;我已经为这个逻辑使用了一些代码。但问题是我无法阻止菜单溢出，我无法修复CSS＆amp;充分实现设计。我正在研究这些问题很长一段时间。我无法解决。请帮我。先感谢您。 请在全屏视图中查看小提琴。

$(document).ready(function() {
  let keepScrolling,
    scrollBy = 123,
    duration = 123,
    GetWidths = function(selector, i = 0) {
      $(selector).each(function(index) {
        i += parseInt($(this).width(), 10);
      });
      return i;
    },
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width();

  function navScrollTo(direction = true) {
    let
      menu = $('.navbar-angle nav'),
      scroller = $('li:first-child', menu),
      current = parseInt(scroller.css("margin-left")),
      checked = Math.max(Math.min(isNaN(current) ? -scrollBy : current, -scrollBy), (scrollBy - currentMax - 102)),
      newVal = direction ? checked - scrollBy : checked + scrollBy;
    scroller.animate({
      'margin-left': newVal + 'px'
    }, duration, "linear");
    setTimeout(function() {
      if (keepScrolling) navScrollTo(direction);
    }, duration);
  }
  $('.navbar-angle > i').mousedown(function(e) {
    keepScrolling = true;
    navScrollTo($(e.target).closest('.fa').hasClass('chevron-left'));
  })
  $('.navbar-angle > i').mouseup(function(e) {
    keepScrolling = false;
  });
  // in a production env the function below should be throttled
  // with {trailing:true}
  $(window).on('resize', function() {
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width()
  })
})

.navbar-angle>i {
  display: none;
}

body {
  overflow-x: hidden;
}

.navbar-angle {
  max-width: 1280px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

@media(min-width: 767px) {
  .navbar-angle {
    position: relative;
    display: flex;
    align-items: center;
  }
  .navbar-angle>i {
    font-size: 40px;
    width: 50px;
    height: 52px;
    cursor: pointer;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border: 1px solid #080808
  }
  .navbar-angle>i.chevron-left {
    border-right-color: rgba(0, 0, 0, .35);
  }
  .navbar-angle>i.chevron-right {
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle nav {
    width: calc(100% - 100px);
    border-radius: 0;
    margin-bottom: 0;
    border-right-color: rgba(0, 0, 0, .35);
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle .container-fluid {
    padding: 0;
  }
  .navbar-angle nav .navbar-nav {
    display: flex;
  }
  .navbar-angle nav .navbar-nav li {
    flex: 1 0 auto;
  }
}

@media (max-width: 768px) {
  .navbar-angle nav li:first-child {
    margin-left: 0px!important;
  }
}

<link href="https://fonts.googleapis.com/css?family=Lato%7cMontserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/paperindex.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/pi-header-n-footer.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script>
<div class="navbar-angle">
  <i class="fa fa-chevron-left chevron-left" aria-hidden="true"></i>
  <nav class="navbar dashboard-nav mrgn-btm-0">
    <div class="container-fluid">
      <ul class="nav navbar-nav dashboard-menu admin-dashbrd-mnu" id="dashboard-menu-lst">
        <li class="active" data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">Live</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/RFQ-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" class="dropdown-toggle" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">Denied</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <!--<li><a href="/admin-console/companies/ban-accounts.html" data-original-title="" title="">Ban Accounts</a></li>-->
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>

      </ul>
    </div>
  </nav>
  <i class="fa fa-chevron-right chevron-right" aria-hidden="true"></i>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

以下是可以帮助您的简单黑客，尝试希望它能帮助您。

.navbar-angle>i.fa-chevron-left:after {
  content: '';
  background: #fff;
  width: 100%;
  height: 100%;
  left: -50px;
  position: absolute;
}

.navbar-angle>i.fa-chevron-right:after {
  content: '';
  background: #fff;
  width: 100%;
  height: 100%;
  right: -50px;
  position: absolute;
}

Answer 2

将overflow: hidden;添加到.navbar-angle并删除左右填充

.navbar-angle {
    position: relative;
    display: flex;
    margin: auto;
    align-items: center;
    overflow: hidden;//add this
    padding:0px;//add this
}

工作代码

$(document).ready(function() {
  let keepScrolling,
    scrollBy = 123,
    duration = 123,
    GetWidths = function(selector, i = 0) {
      $(selector).each(function(index) {
        i += parseInt($(this).width(), 10);
      });
      return i;
    },
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width();

  function navScrollTo(direction = true) {
    let
      menu = $('.navbar-angle nav'),
      scroller = $('li:first-child', menu),
      current = parseInt(scroller.css("margin-left")),
      checked = Math.max(Math.min(isNaN(current) ? -scrollBy : current, -scrollBy), (scrollBy - currentMax - 102)),
      newVal = direction ? checked - scrollBy : checked + scrollBy;
    scroller.animate({
      'margin-left': newVal + 'px'
    }, duration, "linear");
    setTimeout(function() {
      if (keepScrolling) navScrollTo(direction);
    }, duration);
  }
  $('.navbar-angle > i').mousedown(function(e) {
    keepScrolling = true;
    navScrollTo($(e.target).closest('.fa').hasClass('chevron-left'));
  })
  $('.navbar-angle > i').mouseup(function(e) {
    keepScrolling = false;
  });
  // in a production env the function below should be throttled
  // with {trailing:true}
  $(window).on('resize', function() {
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width()
  })
})

.navbar-angle>i {
  display: none;
}

body {
  overflow-x: hidden;
}

.navbar-angle {
  max-width: 1280px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

@media(min-width: 767px) {
  .navbar-angle {
    position: relative;
    display: flex;
    align-items: center;
    overflow:hidden;
    padding:0px;
  }
  .navbar-angle>i {
    font-size: 40px;
    width: 50px;
    height: 52px;
    cursor: pointer;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border: 1px solid #080808
  }
  .navbar-angle>i.chevron-left {
    border-right-color: rgba(0, 0, 0, .35);
  }
  .navbar-angle>i.chevron-right {
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle nav {
    width: calc(100% - 100px);
    border-radius: 0;
    margin-bottom: 0;
    border-right-color: rgba(0, 0, 0, .35);
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle .container-fluid {
    padding: 0;
  }
  .navbar-angle nav .navbar-nav {
    display: flex;
  }
  .navbar-angle nav .navbar-nav li {
    flex: 1 0 auto;
  }
}

@media (max-width: 768px) {
  .navbar-angle nav li:first-child {
    margin-left: 0px!important;
  }
}

<link href="https://fonts.googleapis.com/css?family=Lato%7cMontserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/paperindex.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/pi-header-n-footer.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script>
<div class="navbar-angle">
  <i class="fa fa-chevron-left chevron-left" aria-hidden="true"></i>
  <nav class="navbar dashboard-nav mrgn-btm-0">
    <div class="container-fluid">
      <ul class="nav navbar-nav dashboard-menu admin-dashbrd-mnu" id="dashboard-menu-lst">
        <li class="active" data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">Live</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/RFQ-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" class="dropdown-toggle" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">Denied</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
              </ul>
            </li>
            <!--<li><a href="/admin-console/companies/ban-accounts.html" data-original-title="" title="">Ban Accounts</a></li>-->
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown " data-original-title="" title=""><a class="dropdown-toggle" href="#" data-original-title="" title="">LoreIpsum <span class="caret"></span> <span class="notification"><span class="notification-count">7</span></span></a>
          <ul class="dropdown-menu drpdwn-submenu">
            <li class="dashboard-drpdwn-pointer" data-original-title="" title=""></li>
            <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
            <li class="dropdown dropdown-submenu" data-original-title="" title=""><a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-bottom: none;" data-original-title="" title="">LoreIpsum</a>
              <ul class="dropdown-menu">
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <li data-original-title="" title=""><a href="#" data-original-title="" title="">LoreIpsum</a></li>
                <!--<li><a href="/admin-console/RFQ/reviewed/products-of-banned-deactived-accounts.html" data-original-title="" title="">Others</a></li>-->
              </ul>
            </li>
          </ul>
        </li>

      </ul>
    </div>
  </nav>
  <i class="fa fa-chevron-right chevron-right" aria-hidden="true"></i>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>