CSS Drop-Up Menu問題

我想爲網站創建一個下拉菜單，但我的菜單項只顯示在右側，但我希望它們出現在選項上方。我該如何解決？CSS Drop-Up Menu問題

也希望能找到一些幫助，瞭解如何更正代碼，讓我將鼠標懸停在可用的下拉菜單選項上。

這裏是網站的鏈接，如果有人想檢查它看看代碼是什麼樣的。

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>

來源

2016-09-19 Krispy

推薦以下內容[本指南用於創建最小，完整，可驗證示例]（http://stackoverflow.com/help/mcve）。就目前而言，您的鏈接可能會在任何時候發生變化，這個問題對幫助任何人都將變得毫無意義。 – chazsolo

菜單項只顯示在右側。所以？你想做什麼？ –

我希望它們出現在菜單上方而不是右側。 – Krispy

變化position: fixed到position: absolute並設置left和bottom位置爲.dropdown-content，並設置li到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); 
}

和ul以及刪除overflow: hidden ...

來源

2016-09-19 22:05:20

CSS Drop-Up Menu問題

回答

相關問題