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问题

回答

相关问题