"position:fixed"破坏了CSS网页中的下拉菜单

Question

"position:fixed"破坏了CSS网页中的下拉菜单

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

cyr*_*r_x 5

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年前
查看次数：	5877 次
最近记录：	8 年前