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

概述我正在创建一个网页,当我将鼠标悬停在.Soccer部分上时,它将下拉并显示Link1,Link2,Link3.没有position：fixed;,代码工作得非常好.因为我想在网页的顶部标题,我把位置：固定;但是一旦我把它打开,“足球”的下拉按钮就不起作用了.html { background-image: url('Images/BackgroundIm

我正在创建一个网页,当我将鼠标悬停在.soccer部分上时,它将下拉并显示link1,link2,link3.

没有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,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.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;}

请问我是否不理解我想要做的事情的概念.如果你明白,请帮助我.
这是我的第一篇文章,所以与其他帖子相比可能有点偏差.
最佳答案你有一个溢出：隐藏在你的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,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,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;}
以上是内存溢出为你收集整理的html  – “position：fixed”破坏了CSS网页中的下拉菜单全部内容，希望文章能够帮你解决html  – “position：fixed”破坏了CSS网页中的下拉菜单所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119270.html