将megamenu内容与容器div对齐

Question

我在做一个肚脐酒吧。

为了管理megamenu，我使用基于Bootstrap 3的引导-下拉菜单库(GitHub链路)。

一切运行良好，但megamenu内容与div容器不对齐。

这里有一个截图来解释更好的问题。

​

我想要的是让第一个元素的超级游戏与“标志”。

在这里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，它实际上在默认情况下导致了issue.Because，它为您的导航器添加了页边距和填充，我已经删除了这个div。另外，在您的徽标边距和下拉容器中添加了一些内容：

.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。它也是有反应的。