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

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

}

gt;

Meta charset="UTF-8">

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

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