CSS Drop-Up-Menü Fragen

Ich möchte ein Drop-Up-Menü für eine Website erstellen, aber meine Menüelemente werden nur auf der rechten Seite angezeigt, aber ich möchte, dass sie über der Option angezeigt werden. Wie behebe ich das?CSS Drop-Up-Menü Fragen

Auch würde einige Hilfe schätzen herauszufinden, wie man den Code korrigieren, um mich über die verfügbaren Drop-up-Menüoptionen zu bewegen.

Hier ist der Link zur Website, wenn jemand es sehen möchte, um zu sehen, wie der Code aussieht.

http://www.public.asu.edu/~kwenzel3/IFT301FallAKrisW/Final.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Milestone</title> 
<style type="text/css"> 

body { 
background-color: gray; 
background-image: url('images/backgroundpic.jpg'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
} 

ul { 
list-style-type: none; 
position: fixed; 
bottom: 0; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
} 

li { 
float: left; 
} 

li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
background-color: #87cefa; 
} 

li.dropdown { 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: fixed; 
bottom: 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; 
text-align: left; 
} 

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

.dropdown:hover .dropdown-content { 
display: block; 
} 
</style> 
</head> 
<body> 

<ul> 
<li class="dropdown"> 
<a href="#" class="dropbtn">Home</a> 
<div class="dropdown-content"> 
<a href="#">Home Page</a> 
</div> 

<li class="dropdown"> 
<a href="#" class="dropbtn">Music</a> 
<div class="dropdown-content"> 
<a href="#">Song 1</a> 
<a href="#">Song 2</a> 
<a href="#">Song 3</a> 
</div> 

<li class="dropdown"> 
<a href="#" class="dropbtn">Videos</a> 
<div class="dropdown-content"> 
<a href="#">Video 1</a> 
<a href="#">Video 2</a> 
<a href="#">Video 3</a> 
</div> 

<li class="dropdown"> 
<a href="#" class="dropbtn">Tour</a> 
<div class="dropdown-content"> 
<a href="#">North America Dates</a> 
<a href="#">Europe Dates</a> 
<a href="#">Misc Dates</a> 
</div> 

<li class="dropdown"> 
<a href="#" class="dropbtn">Contact</a> 
<div class="dropdown-content"> 
<a href="#">Comments</a> 
<a href="#">Technical Support</a> 
<a href="#">Booking</a> 
</div> 
</li> 
</ul> 

</body> 
</html>

Quelle

2016-09-19 Krispy

Empfehlen Sie Folgendes [dieses Handbuch zum Erstellen eines minimalen, vollständigen, überprüfbaren Beispiels] (http://stackoverflow.com/help/mcve). So wie es aussieht, könnte sich Ihr Link jederzeit ändern und diese Frage wird völlig irrelevant werden, um anderen zu helfen. – chazsolo

Die Menüpunkte werden nur auf der rechten Seite angezeigt. Damit? was willst du tun ? –

Ich möchte, dass sie über dem Menü statt auf der rechten Seite angezeigt werden. – Krispy

ändern position: fixed zu position: absolute und setzen left und bottom Positionen für .dropdown-content und stellen Sie die li zu position: relative;

ul li { 
    position: relative; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    bottom: 30px; /* or something */ 
    left: 0; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
}

und entfernen overflow: hidden von ul auch ...

Quelle

2016-09-19 22:05:20

CSS Drop-Up-Menü Fragen

Antwort

Verwandte Themen