드롭 다운 메뉴가 Navbar에 의해 겹쳐졌습니다

안녕하세요, 드롭 다운 메뉴가 있습니다.이 메뉴는 마우스를 가져 왔을 때 값을 표시하지만 내 바로 다음 nav 막대에서만 오버랩되었습니다. 첫 번째 값만 표시됩니다. 도움이 필요하고, 첨부 된 코드와 스냅 샷이 필요합니다. 드롭 다운 메뉴가 Navbar에 의해 겹쳐졌습니다

<nav class="navbar top-color"> 
    <div class="container-fluid" ng-cloak data-ng-init="initializeMethods()"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <img class="img-responsive logo" src="css/images/Groupz.png" /> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 

     <div class="nav navbar-right" style="padding-top:6px;"> 
     <div class="dropdown"> 
     <span class="badge">5</span><img style="padding-right:10px;" src="css/images/bell1.png" /> 
     <img class="img-circle dropdown-toggle profilepic" data-toggle="dropdown" width="40" height="40" style="padding:1px" ng-src="{{model.profileurl}}" /> 

     <div class="dropdown" style="float:right;"> 
    <div class="caret dropdown-toggle"></div> 
    <div class="dropdown-content" style="right:0;"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    </div> 
</div> 



     </div> 
    </div> 
    </div> 
</div> 
</nav> 

    <style> 
     .dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    right: 0; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

    </style> 


    <nav class="navbar navbar-default firstmenu"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand">Welcome - {{model.membername[0]}}</a> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 

     </div> 
    </div> 
    </nav>

출처

2016-07-14 Priya Tinkle

위의 화살표 기호는 단지 벨로우즈로 이동하기 때문입니다. – Ranjan

나는 꼭대기 술집에서만 그것을 원한다. 아래는 아닙니다. –

https://github.com/puikinsh/gentelella이 템플릿을 다운로드하면 헤더가 헤더와 매우 유사합니다. – Ranjan

정말 JSFiddle에서 코드를 실행할 수 없습니다. 그러나 겹치는 요소를 제거하는 좋은 방법은 z-index:으로 작업하는 것입니다. 전경의 요소에 배경의 요소보다 높은 값을 지정하면됩니다. 예를 들자면 : https://jsfiddle.net/mx17yhn4/

출처

2016-07-14 09:07:24 Jan

안녕하세요. 감사합니다. 정말로 도움이됩니다. –

드롭 다운 메뉴가 Navbar에 의해 겹쳐졌습니다

답변

관련 문제