HTML / CSS下拉菜單問題（下拉列表顯示在同一行）
[英]HTML/CSS Dropdown menu issue (Dropdown list appearing on the same line)
問題描述
我在創建下拉列表時遇到問題。 當您將鼠標懸停在“階段”錨點上時，應該發生的是該列表應該直接出現在其下方。 但是由於某種原因，它顯示在該欄的左側，同一行。
這讓我發瘋。 有人可以幫我解決這個問題嗎？
<body>
<div id="header">
<div id="navigation">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Stages</a>
<ul>
<li><a href="#">Stage #1</a></li>
<li><a href="#">Stage #2</a></li>
<li><a href="#">Stage #3</a></li>
</ul>
<li><a>Contact</a></li>
</ul>
</div>
</div>
</body>
CSS：
body {
margin: 0;
}
div#header {
height: 100px;
width: 100%;
background-color: rgb(196,196,196);
border-bottom: 2.5px solid rgb(0, 199, 255);
}
div#navigation {
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
height: 50px;
width: 50%;
background-color: rgb(0, 199, 255);
}
div#navigation > ul {
margin: 0;
padding: 0;
position:relative
}
div#navigation ul li {
list-style: none;
display: block;
}
div#navigation ul li a {
text-decoration: none;
float: left;
display: block;
padding: 15px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
div#navigation ul li a:hover {
background-color: rgb(135, 206, 255);
color: rgb(255, 250, 250);
}
div#navigation ul li:hover ul {
display: block;
}
div#navigation ul ul {
display: none;
position: absolute;
}
div#navigation ul ul li {
display: block;
}
4 個解決方案
解決方案1
0 2015-08-23 21:08:03
您可以添加margin並控制您的下拉列表。 像這樣：
div#navigation ul li:hover ul {
display: block;
margin: 50px;
}
解決方案2
0 2015-08-23 21:09:08
添加top：50px; 將其放下並添加left屬性，最好以百分比表示，盡管在測試中效果並不理想；您可能必須添加media queries 。
這是一個小提琴
body { margin: 0; } div#header { height: 100px; width: 100%; background-color: rgb(196, 196, 196); border-bottom: 2.5px solid rgb(0, 199, 255); } div#navigation { margin-left: auto; margin-right: auto; position: relative; top: 50%; height: 50px; width: 50%; background-color: rgb(0, 199, 255); } div#navigation > ul { margin: 0; padding: 0; position:relative } div#navigation ul li { list-style: none; display: block; } div#navigation ul li a { text-decoration: none; float: left; display: block; padding: 15px 20px; font-family: Arial, Helvetica, sans-serif; font-size: 17px; font-weight: bold; } div#navigation ul li a:hover { background-color: rgb(135, 206, 255); color: rgb(255, 250, 250); } div#navigation ul li:hover ul { display: block; } div#navigation ul li ul { display: none; position: absolute; padding-left:10px; top:75px; left:32%; } div#navigation ul li ul li { display: block; }
<body> <div id="header"> <div id="navigation"> <ul> <li><a>Home</a></li> <li><a>About</a></li> <li><a>Stages</a> <ul> <li><a href="#">Stage #1</a> </li> <li><a href="#">Stage #2</a> </li> <li><a href="#">Stage #3</a> </li> </ul> </li> <li><a>Contact</a> </li> </ul> </div> </div> </body>
解決方案3
0 已采納 2015-08-23 21:11:36
看一下這個
body {
margin: 0;
}
div#header {
height: 100px;
width: 100%;
background-color: rgb(196,196,196);
border-bottom: 2.5px solid rgb(0, 199, 255);
}
div#navigation {
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
height: 50px;
width: 50%;
background-color: rgb(0, 199, 255);
}
div#navigation > ul {
margin: 0;
padding: 0;
position:relative;
}
div#navigation > ul > li {
list-style: none;
display: block;
float: left;
}
div#navigation ul li {
list-style: none;
display: block;
position: realtive;
}
div#navigation ul li a {
text-decoration: none;
display: block;
padding: 15px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
div#navigation ul li a:hover {
background-color: rgb(135, 206, 255);
color: rgb(255, 250, 250);
}
div#navigation ul li:hover ul {
display: block;
}
div#navigation ul ul {
display: none;
position: absolute;
padding: 0;
}
div#navigation ul ul li {
display: block;
}
https://jsfiddle.net/5wvgdubk/
我將float從a移到li並添加了position: relative以便正確放置內部ul 。 我還從內部ul刪除了填充。
解決方案4
0 2015-08-23 21:14:32
在div＃navigation ul ul中添加頁邊距和填充0，頂部px將下面的子菜單對齊：
div#navigation ul ul {
display: none;
position: absolute;
top: 47px;
margin: 0;
padding: 0;
}
html / css下拉列表沒有出現
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.