부트 스트랩 드롭 다운 메뉴 메뉴 막대의 이상한 동작

Question

내 웹 사이트 메뉴에 드롭 다운 메뉴를 포함하려고합니다. 정상적으로 작동하지만 클릭하면 모든 메뉴 막대에 장애가 발생합니다. 드롭 다운 메뉴는 헤더를 아래로 움직여 디자인을 변경합니다. 나는 그림을 업로드하려고 노력했다. 그러나 웹 사이트는 나를 놓아주지 않았다.

기본적으로 문제는 드롭 다운 메뉴를 클릭하면 메뉴 막대가 확대되어 디자인이 변경되고 드롭 다운 메뉴는 다른 요소 위에 펼쳐지지 않는다는 것입니다. 도움을 주셔서 감사합니다.

<header id="header" role="banner"> 
     <div class="container"> 
     <div id="navbar" class="navbar navbar-default"> 
      <div class="navbar-heade"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
       <a class="navbar-brand" href="../../index.html"></a> </div> 
      <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#main-slider"><i class="icon-home"></i></a></li> 
        <li><a href="http://www.google.com">Search your Place</a></li> 
        <li><a href="logout">Public your Place</a></li> 
        <li><a href="#" data-toggle="modal" data-target="#myModal">Sign Up</a></li> 
        <li><a href="#" data-toggle="modal" data-target="#myModallogin">Log In</a></li> 

        <li id="fat-menu" class="dropdown"> 
        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> 
         <i class="icon-user"></i> Prueba 
         <i class="icon-caret-down"></i> 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a tabindex="-1" href="#">My Account</a></li> 
         <li class="divider"></li> 
         <li><a tabindex="-1" class="visible-phone" href="#">Opciones</a></li> 
         <li class="divider visible-phone"></li> 
         <li><a tabindex="-1" href="logout"><i class="icon-off"></i> Logout</a></li> 
        </ul> 
        </li> 
       </ul> 
      </nav> 
      </div> 
     </div> 
     </div> 
    </header> 

내가 bootstrap.css에서 이것을 시도

다음

.dropdown-menu { 
     position: relative; 
     z-index: 9999; 

    } 
    .navbar-default { 
     background: #fff; 
     border-radius: 0 0 5px 5px; 
     border: 0; 
     padding: 0; 
     -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); 
     -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); 
     box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); 
     overflow: hidden; 

Answer 1

두 솔루션

1)

위하려는 CSS 코드가 모두 필요하지 않다에게 있습니다 .. 그것도없이 잘 작동합니다 .. 여기에 대한 데모가 있습니다 http://jsfiddle.net/adarshkr/k7e7w1e6/

(210)

2)

보정이 CSS 여기

.dropdown-menu { 
     position: absolute; /* it should not relative */ 
     z-index: 9999; 

    } 
    .navbar-default { 
     background: #fff; 
     border-radius: 0 0 5px 5px; 
     border: 0; 
     padding: 0; 
     -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); 
     -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); 
     box-shadow: 0 1px 3px 0 rgba(0,0,0,.2); 
     /* overflow: hidden;*/ /*comment of this line */ 
} 

에 필요한이 보정

http://jsfiddle.net/adarshkr/mo86gv1o/

에 대한 링크입니다