将 megamenu 内容与容器 div 对齐

Question

我正在使用 megamenu 制作导航栏。
为了管理 megamenu，我使用了基于 Bootstrap 3 的 bootstrap-dropmenu 库 (GitHub link)。

一切正常，但 megamenu 内容与 div 容器不一致。

这里有一个截图可以更好地解释问题。

我希望 megamenu 的第一个元素与“LOGO”对齐。

这里是 HTML 代码：

<nav class="navbar top-menu">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand logo" href="#">LOGO</a>
        </div>

        <div class="collapse navbar-collapse navigation-menu">
             <ul class="nav navbar-nav">
                 <li>
                     <a href="#">home</a>
                 </li>
                 <li class="dropdown dropdown-megamenu">
                     <a class="dropdown-toggle" data-toggle="dropdown" >tab 1</a>
                         <div class="dropdown-container">
                              <ul class="dropdown-menu">
                                   <li><a href="#">elem 1</a></li>
                                   <li><a href="#">elem 2</a></li>
                                   <li><a href="#">elem 3</a></li>
                                   <li><a href="#">elem 4</a></li>
                              </ul>
                         </div><!-- /dropdown-container -->
                 </li>
            </ul>
     </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

还有 CSS：

.top-menu{
    background: green;
 }

.logo{
    font-size:40px;
    font-size:4rem;
    color:#FFF;
    display:block;
    float:left;
    font-weight:700;
    overflow:hidden;
    text-decoration:none;
    margin-top: 5px;
}

.logo:hover, .logo:visited, .logo:link, .logo:active {
    color: #FFFFFF;
    text-decoration: none;
}

.navigation-menu{
    width:auto;
    float:left;
 }

.navigation-menu li{
    font-size:13px;
    font-size:1.3rem;
    display:block;
    font-weight:700;
    line-height:16px;
    text-align:left;
    text-transform:uppercase;
    margin:0 10px;
} 

.navigation-menu li a{
    color: #FFFFFF;
    display:block;
    padding:20px 20px;
    text-decoration:none;
    text-align: center;
    border-top: 5px solid transparent;
}

.dropdown-megamenu li a{
    font-size:13px;
    font-size:1.3rem;
    color: #000080;
    display:inline;
    padding:0;
    text-decoration:none;
    text-align: center;
    border-top: 5px solid transparent;
    text-transform:uppercase;
    font-weight:700;
    line-height:16px;
    margin:0 10px;
}

.dropdown-megamenu li a:hover{
    font-size:13px;
    font-size:1.3rem;
    color: #e5ae07;
    display:inline;
    padding:0;
    text-decoration:none;
    text-align: center;
    border-top: 5px solid transparent;
    text-transform:uppercase;
    font-weight:700;
    line-height:16px;
    margin:0 10px;
}

.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
    background-color: #b3b3ff;
    color:#000080;
    text-decoration: none;
    display:block;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

ul.nav a:hover {
    background: #000080;
    color: #FFFFFF !important;
    border-top: 5px solid #b3b3ff;
}


.nav > .dropdown-megamenu {
    position: static;
 }

.nav .open>a {
    background: #000080;
    color: #FFFFFF !important;
    border-top: 5px solid transparent;
}

.nav .open>a:hover {
    background: #000080;
    color: #FFFFFF !important;
    border-top: 5px solid #b3b3ff;
}

.dropdown-megamenu > .dropdown-container {
    background-color: #e6e6ff;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 100%;
    text-align: left;
}

.dropdown-menu>li {
    display: inline;
    padding: 10px;
}

我已经准备了一个JSFiddle的真实案例。

谁能向我解释如何实现我的目标？

Answer 1

您正在使用带有类容器的 div，这实际上导致了问题。因为默认情况下它会为您的导航栏添加边距和填充。我已删除该 div。 Plus 对您的徽标 margin-left 和 dropdown-container 做了一些补充：

.logo{
    font-size:40px;
    font-size:4rem;
    color:#FFF;
    display:block;
    float:left;
    font-weight:700;
    overflow:hidden;
    text-decoration:none;
    margin-top: 5px;
    /* addition to your code */
    margin-left: 25px;
}
.dropdown-megamenu > .dropdown-container {
    background-color: #e6e6ff;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 100%;
    text-align: left;
    /* Addition to your code*/
    padding: 0px 13px;
}

您可以查看JSFiddle。它也是响应式的。