HTML / CSS下拉菜单问题（下拉列表出现在同一行） [英] HTML/CSS Dropdown menu issue (Dropdown list appearing on the same line)
问题描述
我在创建下拉列表时遇到问题。当您悬停在阶段锚点上时应该发生什么是列表应该直接显示在它的下面。但是由于某种原因，它出现在酒吧的左边，同一条线上。
I'm having an issue with creating dropdown lists. What is supposed to happen when you hover over the 'Stages' anchor is that the list is supposed to appear directly below it. But for some reason, it is appearing to the left of the bar, on the same line.
这让我很开心。有人可以帮助我解决这个问题吗？
This is driving me nuts. Can somebody help me with this issue?
<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;
}
推荐答案
>
Check this out
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中删除了填充。
I moved the float from the a to the li and added position: relative so that the inner ul is placed correctly. I also removed the padding from the inner ul.
这篇关于HTML / CSS下拉菜单问题（下拉列表出现在同一行）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
