Question

我正在创建一个网页，当我将鼠标悬停在.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>

请问我是否不理解我想要做的事情的概念。如果你明白，请帮助我。

这是我的第一篇文章，所以与其他帖子相比可能有点偏差。

Answer 1

您的overflow: hidden元素上有ul。因此，没有显示下拉列表。删除它会使下拉列表再次出现。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

只需将position的{{1}}更改为.Soccer-content

＆＃13;

fixed

＆＃13;

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;
}

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: fixed;
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;
}

＆＃13;

“position：fixed”破坏了CSS网页中的下拉菜单

2 个答案: