我正在创建一个网页，当我将鼠标悬停在.Soccer部分，它将下拉并显示 Link1、Link2、Link3。
如果没有position: fixed;，代码工作得很好。
因为我希望标题位于网页顶部，所以我把position: fixed;
但一旦我穿上它，“足球”的下拉按钮就不起作用了。
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333;
position: fixed;
/* Removing this makes the dropdown work */
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li><a href="brokenlink.html">Home</a></li>
<li><a href="#brokenlink.html">News</a></li>
<li class="Soccer">
<a href="javascript:void(0)" class="dropbtn">Soccer</a>
<div class="Soccer-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
如果您不明白我正在尝试做的事情的概念，请询问我。如果你明白的话，请帮助我。
这是我的第一篇文章，因此与其他文章相比可能有点偏差。
你有一个overflow: hidden在你的ul元素。因此没有显示下拉菜单。删除它会使下拉菜单再次出现。
html {
background-image: url("Images/BackgroundImageI.jpg");
background-repeat: no-repeat;
}
body {
background-color: White;
color: Black;
margin-left: 0%;
margin-right: 0%;
margin-top: 40%;
margin-bottom: 0%;
border: 10px outset Gray;
}
h1 {
font-family: Arial, Verdana, Geneva, sans-serrif;
color: teal;
text-align: center;
}
p {
font-family: Arial, Verdana, Geneva, sans-serrif, serrif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
}
ul {
margin-left: 0%;
margin-right: 0%;
margin-top: 0%;
list-style-type: none;
margin: 0;
padding: 0;
top: 0;
width: 100%;
background-color: #333;
position: fixed;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.Soccer:hover .dropbtn {
background-color: teal;
}
li.Soccer {
display: inline-block;
}
.Soccer-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.Soccer-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.Soccer-content a:hover {
background-color: teal
}
.Soccer:hover .Soccer-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="testeditor.css" type="text/css">
</head>
<body>
<ul>
<li><a href="brokenlink.html">Home</a></li>
<li><a href="#brokenlink.html">News</a></li>
<li class="Soccer">
<a href="javascript:void(0)" class="dropbtn">Soccer</a>
<div class="Soccer-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Soccer Menu inside a Navigation Bar</h3>
<p>Hover over the "Soccer" link to see the Soccer menu.</p>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
