CSSドロップダウンメニューの質問

ウェブサイトのドロップダウンメニューを作成したいのですが、私のメニュー項目は右側に表示されていますが、それらをオプションの上に表示します。これをどうやって解決するのですか？CSSドロップダウンメニューの質問

また、使用可能なドロップダウンメニューオプションにカーソルを合わせるためにコードを修正する方法を理解する助けにもなります。

コードがどのように見えるかを誰かがチェックアウトしたいと思っている場合は、ここにリンクがあります。 position: absoluteへ

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と.dropdown-contentためleftとbottom位置を設定し、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ドロップダウンメニューの質問

答えて

関連する問題