Hallo Ich habe ein Dropdown-Menü, es zeigt Werte, wenn es schwebt, aber es wurde von meiner nächsten Navigationsleiste überlappt.Nur der erste Wert ist sichtbar. Benötigen Sie Hilfe, angehängten Code sowie Snapshots. Dropdown-Menü wurde von Navbar überlappt
<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>
ist nur weil, dass Ihre Pfeilmarke auf der Oberseite nur verschieben Sie es nach unten. – Ranjan
Ich will es nur an der oberen Leiste. Nicht in unten. –
https://github.com/puikinsh/gentelella Laden Sie diese Vorlage herunter und die Kopfzeile ist Ihrer Kopfzeile sehr ähnlich. – Ranjan