Question

默认情况下，我的网站上有一个导航栏，其中子菜单项当前垂直对齐。我希望它们在水平方向上对齐，并在主要项目下方以新行的形式显示它们。

我的两个菜单项都有下拉菜单，第一个和最后一个。本来我以为我把子项目显示为一行并正确对齐。但是这是我检查最后一项的时候。当我检查第一个容器时，带有子项的容器将移至左侧并离开页面。

我认为最好的描述方法是容器将其自身与标题项右对齐，尽管在最后一个下拉列表中看起来不错，但它在第一个下拉列表中并不正确，需要“左” -对齐”。为了清楚起见，我在下面链接了几个屏幕截图，第一个显示了我想要的样子，第二个显示了第一个下拉菜单的显示方式。我还复制了我的代码和CSS。

我敢肯定，这是可以做到的，而且可能比我尝试的要容易得多，因此我们将不胜感激。

Correctly showing dropdown

Incorrect dropdown

.header {
  position: absolute;
  z-index: 10;
  width: 100%;
}

.navbar-inverse {
  background-color: #252a6e;
  border: none;
}

.navbar-toggle {
  border: none;
}

.navbar-brand {
  padding: 0;
}

.navbar-brand>img {
  height: 100%;
  padding: 5px;
  width: auto;
}

.main-nav {
  clear: both;
  background: #252A6E;
}

.main-nav .nav>li>a {
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
}

.main-nav .nav>li>a .caret {
  color: #C8228D;
}

.main-nav .nav>li>a:focus,
.nav .open>a:focus,
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus {
  border-bottom: 3px solid #C8228D;
  background-color: #252a6e;
}

.sub-menu {
  padding: 5px 0px ! important;
  width: 800px;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  margin-top: 0px;
  background-color: #252a6e;
  border: none;
  margin-left: auto;
  margin-right: auto;
}

.sub-menu li {
  display: inline-block;
  float: left;
  padding: 3px 0;
}

.sub-menu li.sub-menu-column {
  margin-right: 0px;
  font-size: 18px;
}

.main-nav .nav>li>a {
  font-size: 20px;
  padding: 10px 0;
  margin: 10px 10px;
}

.dropdown-menu>li>a {
  color: #ffffff !important;
  padding: 3px 0;
  margin: 0 20px;
}

<nav class="main-nav" id="main-nav">
  <nav class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <img class="menu-icon" src="~/Images/menu.png" />
                </button>
        <a class="navbar-brand" id="logo" href="/">
          <img src="~/Images/Logo.png" alt="Logo" />
        </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle menu-item" data-toggle="dropdown" role="button" aria-expanded="false">Header 1 <span class="caret"></span></a>
            <ul class="dropdown-menu sub-menu">
              <li class="sub-menu-column">
                <a href="#">Sub Header 1</a>
              </li>
              <li class="sub-menu-column">
                <a href="#">Sub Header 2</a>
              </li>
              <li class="sub-menu-column">
                <a href="#">Sub Header 3</a>
              </li>
              <li class="sub-menu-column">
                <a href="#">Sub Header 4</a>
              </li>
            </ul>
          </li>
          <li><a class="menu-item" href="#">Header 2</a></li>
          <li><a class="menu-item" href="#">Header 3</a></li>
          <li><a class="menu-item" href="#">Header 4</a></li>
          <li><a class="menu-item" href="#">Header 5</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle menu-item" data-toggle="dropdown" role="button" aria-expanded="false">Header 6 <span class="caret"></span></a>
            <ul class="dropdown-menu sub-menu">
              <li class="sub-menu-column">
                <a href="#">Sub Header 1</a>
              </li>
              <li class="sub-menu-column">
                <a href="#">Sub Header 2</a>
              </li>
              <li class="sub-menu-column">
                <a href="#">Sub Header 3</a>
              </li>
              <li class="sub-menu-column">
                <a href="#">Sub Header 4</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</nav>

在主导航下水平对齐导航栏下拉菜单

0 个答案: