“位置：固定”；破坏CSS网页中的下拉菜单 [英] "position: fixed" ruins the dropdown menu in CSS webpage

问题描述

我正在创建一个网页，当我将鼠标悬停在 .Soccer 部分时，它将下拉并显示Link1，Link2，Link3。

没有位置：已固定； ，代码运行正常。
正如我想要的标题位于网页顶部一样，我放置了 position：fixed;

但是我一戴上，足球的下拉按钮就不起作用。

  html {背景图片：url（ Images / BackgroundImageI.jpg ）;背景重复：不重复；} body {background-color：White;颜色：黑色；左边距：0％；右边距：0％；利润率最高：40％;下边距：0％;边框：开始时灰阶为10px；} h1 {字体系列：Arial，Verdana，日内瓦，无衬线；颜色：蓝绿色text-align：center;} p {font-family：Arial，Verdana，Geneva，sans-serrif，serrif; font-size：12px;字体样式：正常； font-weight：正常； line-height：24px;} ul {边距左：0％;右边距：0％；上边距：0％; list-style-type：无；边距：0;填充：0;最高：0;宽度：100％;溢出：隐藏；背景颜色：＃333；位置：固定/ *删除此选项使下拉列表起作用* /} li {float：left;} li a，.dropbtn {display：inline-block;白颜色;文本对齐：居中；填充：14px 16px;文本装饰：无；} li a：hover，.Soccer：hover .dropbtn {背景颜色：青色；} li.Soccer {display：inline-block;}。足球内容{display：none;位置：绝对；背景颜色：＃f9f9f9;最小宽度：160像素； box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。足球内容a {颜色：黑色；填充：12px 16px;文字修饰：无；显示：块； text-align：left;}。足球内容a：hover {背景颜色：青色} .Soccer：hover。足球内容{display：block;}  

< pre class = snippet-code-html lang-html prettyprint-override> <！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>首页< / a>< / li> < li>< a href =＃brokenlink.html>新闻< / a>< / li> < li class = Soccer> < a href = javascript：void（0） class = dropbtn>足球< / a> < div class = Soccer-content> < a href =＃>链接1< / a> < a href =＃>链接2< / a> < a href =＃>链接3< / a> < / div> < / li> < / ul> < h3>导航栏中的足球菜单< / h3> < p>将鼠标悬停在足球链接上可以查看足球菜单。< / p>< / body>< / html>

请问我是否不理解我要做什么的概念。如果您确实了解，请帮助我。

这是我的第一篇文章，因此与其他文章相比可能有些偏离。

解决方案

您的<$ c $上有溢出：隐藏 c c> ul 元素。因此没有显示下拉列表。删除它会使下拉列表再次出现。

  html {background-image：url （ Images / BackgroundImageI.jpg）;背景重复：不重复；} body {background-color：White;颜色：黑色；左边距：0％；右边距：0％；利润率最高：40％;下边距：0％;边框：开始时灰阶为10px；} h1 {字体系列：Arial，Verdana，日内瓦，无衬线；颜色：蓝绿色text-align：center;} p {font-family：Arial，Verdana，Geneva，sans-serrif，serrif; font-size：12px;字体样式：正常； font-weight：正常； line-height：24px;} ul {边距左：0％;右边距：0％；上边距：0％; list-style-type：无；边距：0;填充：0;最高：0;宽度：100％;背景颜色：＃333；位置：固定；} li {浮动：左；} li a，.dropbtn {display：inline-block;白颜色;文本对齐：居中；填充：14px 16px;文本装饰：无；} li a：hover，.Soccer：hover .dropbtn {背景颜色：青色；} li.Soccer {display：inline-block;}。足球内容{display：none;位置：绝对；背景颜色：＃f9f9f9;最小宽度：160像素； box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。足球内容a {颜色：黑色；填充：12px 16px;文字修饰：无；显示：块； text-align：left;}。足球内容a：hover {背景颜色：青色} .Soccer：hover。足球内容{display：block;}  

< pre class = snippet-code-html lang-html prettyprint-override> <！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>首页< / a>< / li> < li>< a href =＃brokenlink.html>新闻< / a>< / li> < li class = Soccer> < a href = javascript：void（0） class = dropbtn>足球< / a> < div class = Soccer-content> < a href =＃>链接1< / a> < a href =＃>链接2< / a> < a href =＃>链接3< / a> < / div> < / li> < / ul> < h3>导航栏中的足球菜单< / h3> < p>将鼠标悬停在足球链接上可以查看足球菜单。< / p>< / body>< / html>

I am creating a webpage in which when I hover over the .Soccer section, it will dropdown and show Link1, Link2, Link3.

Without the position: fixed;, the code works perfectly fine. As I want the heading in top of the webpage, I put position: fixed;

But as soon as I put that on, the dropdown button for "Soccer" does not work.

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>

Please ask me if you do not understand the concept of what I am trying to do. And if you do understand, please help me.

This is my first post so it might be a bit off compared to other posts.

解决方案

You had a overflow: hidden on your ul element. Therefore the dropdown wasn't shown. Removing it makes the dropdown appear again.

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>

这篇关于“位置：固定”；破坏CSS网页中的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！