bootstrap выпадающее меню не выровнено

Question

Я не могу понять, почему мое меню не выравнивается должным образом в выпадающих меню. Они отображаются на нижнем краю его родительской ячейки и делают попытку навигации по ним практически невозможной. Вам нужно спуститься по диагонали прямо, чтобы получить следующее меню. http://imgur.com/zxWcmZf «Скриншот меню»

Я опубликовал код меню ниже, что-то отличает кого-то от того, что мне не хватает? Это моя первая игра с бутстрапом. Спасибо миллиону за все время за помощь в этом.

<div class="navbar-wrapper"> 
    <div class="container"> 
     <div class="navbar"> 
      <div class="navbar-inner"> 
       <div class="buttons-container"> 
       </div> 
       <ul class="blue nav" id="css3-menu"> 
        <li><a href="index.php">Home</a> </li> 
        <li class="dropdown"><a tabindex="-1" class="dropdown-toggle_" data-toggle="dropdown" 
         href="">Choice 1</a> 
         <ul class="dropdown-menu"> 
          <li class="dropdown-submenu"><a tabindex="-1" href="#">Choice 1a</a> 
           <ul class="dropdown-menu"> 
            <li class="dropdown-submenu"><a href="#">Choice 1a1</a> 
             <ul class="dropdown-menu"> 
              <li><a tabindex="-1" href="">Choice 1a1a</a></li> 
              <li><a tabindex="-1" href="">Choice 1a1b</a></li> 
             </ul> 
            </li> 
            <li class="dropdown-submenu"><a href="#">Choice 1a2</a> 
             <ul class="dropdown-menu"> 
              <li><a tabindex="-1" href="">Choice 1a2a</a></li> 
              <li><a tabindex="-1" href="">Choice 1a2b</a></li> 
             </ul> 
            </li> 
            <li class="dropdown"><a href="#">Choice 1b</a> </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice 
         2</a> 
         <ul class="dropdown-menu"> 
          <li><a href="">Choice 2a</a></li> 
          <li><a href="">Choice 2b</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"><a class="dropdown-toggle_" data-toggle="dropdown" href="">Choice 
         3</a> 
         <ul class="dropdown-menu"> 
          <li><a href="">Choice 3a</a></li> 
          <li><a href="">Choice 3b</a></li> 
         </ul> 
        </li> 
        <li><a href="">Choice 4</a> </li> 
        <li><a href="">Choice 5</a> </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

EDIT: К сожалению я забыл CSS не знаю, о чем я думал. Вот CSS, относящийся к нему. Спасибо за вход до сих пор :)

/* css3 menu */ 
ul#css3-menu{ 
    width: 940px; 
    min-width: 940px; 
    margin: 0 auto; 
    list-style: none; 
    font-family: 'Open Sans', Arial, "MS Trebuchet", sans-serif; 
    height: 46px; 
    padding: 0; 
} 

ul#css3-menu > li{ 
    display: block; 
    float: left; 
    -webkit-transition: background .4s linear; 
    -moz-transition: background .4s linear; 
    -ms-transition: background .4s linear; 
    -o-transition: background .4s linear; 
    transition: background .4s linear; 

    <!--[if IE]> 
    position: relative; 
    <![endif]--> 
} 

ul#css3-menu > li:first-child{ 
    border-left: none !important; 
    -webkit-border-top-left-radius: 4px; 
    -webkit-border-bottom-left-radius: 4px; 

    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-bottomleft: 4px; 

    -ms-border-top-left-radius: 4px; 
    -ms-border-bottom-left-radius: 4px; 

    -o-border-top-left-radius: 4px; 
    -o-border-bottom-left-radius: 4px; 

    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 

ul#css3-menu > li:last-child{ 
    border-right: none !important; 
} 


ul#css3-menu > li > a{ 
    display: block; 
    padding: 15px 30px; 
    color: white; 
    text-decoration: none; 
    font-weight: 600; 
     font-weight: bold; 
} 

/* 
ul#css3-menu > li:hover > div{ 
    -webkit-transform: translateY(-80px); 
    -moz-transform: translateY(-80px); 
    -ms-transform: translateY(-80px); 
    -o-transform: translateY(-80px); 
    transform: translateY(-80px); 

} 
*/ 
/*visibility: visible;*/ 

ul#css3-menu > li > div{ 
    -webkit-transition: -webkit-transform .2s linear; 
    -moz-transition: -moz-transform .2s linear; 
    -ms-transition: -ms-transform .2s linear; 
    -o-transition: -o-transform .2s linear; 
    transition: transform .2s linear; 
    text-align: center; 
    margin: 0 auto; 
    -webkit-transform: translateY(-60px); 
    -moz-transform: translateY(-60px); 
    -ms-transform: translateY(-60px); 
    -o-transform: translateY(-60px); 
    transform: translateY(-60px); 
    width: 37px; 
    height: 37px; 
    /*visibility: hidden;*/ 
    margin-bottom: -37px; 
    z-index: -1; 

    <!--[if IE]> 
    margin-top: -60px; 
    <![endif]--> 

} 


ul#css3-menu.blue > li > div{ 
    background: url(../img/icons-blue.png) 0 0 no-repeat; 
} 

.navbar-wrapper { 
    background: #2773AE; 
    background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true); 
    box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
} 
ul#css3-menu.blue{ 
    background: #2773AE; 
    background-color:#2773AE; filter: progid:DXImageTransform.Microsoft.dropShadow(color=#2773AE, offX=0, offY=0, positive=true); 
    box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -webkit-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
    -moz-box-shadow: 0 -10px 8px -10px #074979 inset, 0 10px 8px -10px #074979 inset; 
} 

ul#css3-menu.blue > li{ 
    border-right: 1px #074979 solid; 
    border-left: 1px #3e92d0 solid; 
     height: 46px; 
} 

ul#css3-menu.blue > li:hover{ 
    background: #074979; 
} 

Answer 1

Это что-то в вашем дополнительном файле CSS (что вы еще не писал), что является причиной этого, а не HTML, вас в курсе, ни какой-либо из начальной загрузки CSS-файлов. Когда я тестирую html, который вы опубликовали (весь мой html-файл ниже), я получаю выпадающие списки, чтобы они соответствовали ожидаемому: http://imgur.com/XyYV5pE.

Возможно, вы захотите опубликовать CSS, в который вы входите, так что люди могут посмотреть, что может быть причиной этого, или упростить ваш CSS, чтобы обнажить кости и добавить каждую часть назад один за другим, чтобы отслеживать преступника.

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"/> 
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css"/> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script> 
</head> 

<body> 
<!--your exact markup posted in its entirety, unaltered, here--> 
</body>