Блог

Я работаю над панелью навигации с мегаменю.
Для управления megamenu я использую библиотеку bootstrap-dropmenu (ссылка на GitHub) на основе Bootstrap 3.

Все работает хорошо, но содержимое 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 с реальным случаем.

Может кто-нибудь объяснить мне, как достичь моей цели?

Вы используете div с классом container, который на самом деле вызывал проблему.Потому что по умолчанию он добавлял поля и отступы на вашу панель навигации.Я удалил этот 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. Он также отзывчив.