부트 스트랩 드롭 다운 메뉴가 맞지 않음

Question

내 메뉴가 하위 드롭 다운에서 제대로 정렬되지 않는 이유를 알 수없는 것 같습니다. 부모 셀의 아래쪽 가장자리에 표시되며 거의 불가능한 탐색을 시도합니다. 다음 메뉴를 얻으려면 대각선으로 내려와야합니다. "메뉴의 스크린 샷"

아래 메뉴의 코드를 게시했는데 누락 된 부분에 대해서는 어떤 것도 눈에 띄지 않습니까? 이것은 부트 스트랩이있는 첫 번째 게임입니다. 많은 도움을 주신 모든 분들께 감사드립니다.

<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> 

편집 : 내가 무슨 생각 모르는 CSS를 잊어 죄송합니다. 여기에 관련된 CSS가 있습니다. 덕분에 당신이 게시이 아닌 HTML을 일으키는 지금까지 입력 :

/* 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 파일에 뭔가가, 나 부트 스트랩 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>