2017-12-31 101 views
0

https://jsfiddle.net/0q5s98sL/Drop-Down-Menü ist ein jsfiddle nicht funktioniert und in der falschen Position

Unterhalb angebracht, das derzeit die Dropdown-Menü nicht funktioniert und ich mag es Position in der oberen rechten Ecke sein statt der linken Seite,

Wenn möglich ID wie die Dropdown-Menü die gesamte navbar zu füllen, wenn sie ausgewählt, da dieses Web-App ausschließlich für mobile Geräte ist,

hat jemand irgendwelche Ideen, wie ich diese Probleme lösen kann?

Vielen Dank im Voraus

body { 
 
    background-color: black; 
 
} 
 

 
#icon { 
 
    max-width: 200px; 
 
    margin: 1% auto; 
 
} 
 

 
#navlogo { 
 
    position: absolute; 
 
    right: 3rem; 
 
    height: 4rem; 
 
    top: 2rem; 
 
    line-height: 100px; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    background: black; 
 
    color: white; 
 
} 
 

 
.fa { 
 
    padding: 20px; 
 
    font-size: 30px; 
 
    color: white; 
 
} 
 

 
.fa:hover { 
 
    color: lightgrey; 
 
    text-decoration: none; 
 
} 
 

 
#logo 
 
/*main logo*/ 
 

 
{ 
 
    position: absolute; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    z-index: -1; 
 
    line-height: 100px; 
 
} 
 

 
h1 { 
 
    font-family: "Josefin Sans"; 
 
    font-size: 2.5em; 
 
    right: 3rem; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .carousel-caption { 
 
    display: none; 
 
    } 
 
} 
 

 
#icon { 
 
    max-width: 150px; 
 
} 
 

 
h4 { 
 
    font-size: 1.9em; 
 
} 
 

 
img { 
 
    max-height: 100px; 
 
} 
 

 
p { 
 
    padding-bottom: 5rem; 
 
} 
 

 
p#h6 { 
 
    font-family: "Josefin Sans"; 
 
    color: white; 
 
    font-size: 3.5rem; 
 
    float: left; 
 
    line-height: 150px; 
 
    padding-top: 0; 
 
    z-index: -1; 
 
    margin-left: 1rem; 
 
} 
 

 
#h7 { 
 
    font-family: "Josefin Sans"; 
 
    color: white; 
 
    float: left; 
 
    font-size: 2.5rem; 
 
    line-height: 150px; 
 
} 
 

 
#h8 { 
 
    font-family: "Josefin Sans"; 
 
    color: white; 
 
    float: left; 
 
    font-size: 2.5rem; 
 
    line-height: 150px; 
 
} 
 

 
h4 { 
 
    font-family: "Josefin Sans"; 
 
    color: white; 
 
    font-size: 3rem; 
 
    width: 100px; 
 
    text-align: left; 
 
    position: fixed; 
 
    top: 0rem; 
 
    left: 1rem; 
 
} 
 

 
.navbar { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: Arial; 
 
} 
 

 
.navbar a { 
 
    float: left; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

 
.dropdown .dropbtn { 
 
    font-size: 16px; 
 
    border: none; 
 
    outline: none; 
 
    color: white; 
 
    background-color: inherit; 
 
} 
 

 
.navbar a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    width: 100%; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

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

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

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 
</script> 
 
<script type="text/javascript" src="js/java.js"></script> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 

 
<div class="navbar"> 
 

 
    <div class="dropdown"> 
 
    <button class="dropbtn"> <img src="http://konpakuto.com/logo.jpg"> 
 
     <i class="fa fa-caret-down"></i> 
 
    </button> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<h4 style="padding-bottom:-40rem;">health</h4>

+0

.navbar { Überlauf: sichtbar; } .dropdown { float: links; Überlauf: sichtbar; } .Dropdown: Hover .Dropdown-Inhalt { Anzeige: Block; } – YonatanAr

Antwort

1

durch die folgende CSS hinzufügen, die Sie unten eine Arbeits fallen bekommen

.navbar { 
     overflow: visible; 
     } 
    .dropdown { 
     float: left; 
     overflow: visible; 
    } 

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

Das ist großartig, danke! Ich werde es versuchen, gibt es eine Möglichkeit, es oben rechts auf der Seite zu beheben? – harry

+0

yeah, setzen Sie einfach .dropdown Klasse, um nach links zu schwimmen: .dropdown { float: right; } – YonatanAr

+0

Super! Ich werde es versuchen! Vielen Dank! – harry

Verwandte Themen