Question

当我将UL的位置设置为固定时，当我将鼠标悬停在GAMES上时，下拉列表不会出现！但是当我移除固定位置然后下拉工作，但我整个UL的位置改变

当我保持固定然后它被粘贴到屏幕的顶部和左侧像导航栏这是我想要的但是当我移除位置固定下拉工作但它不再粘到左边和顶部而我尝试设置边距但仍然没有坚持上下左边！这是我的代码：

HTML代码： -

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Contact</a></li>
<li class="dropdown"><a href="#contact" class="dropbtn">Games</a>
 <div class="dropdown-content">
  <a href="#">PUBG</a>
  <a href="#">Fortnite</a>
  <a href="#">PUBG Mobile</a>
</div>
</li>
<li style="float:right"><a href="#about">About</a></li>
</ul>

CSS代码： -

ul {
list-style-type: none;
padding: 0;
overflow: hidden;
background-color: #333;
top: 0;
left: 0;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
}

li {
float: left;
}

li a, .dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
text-decoration: none;
color: white;
}



li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position: absolute;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #333}

.dropdown:hover .dropdown-content {
display: block;
}

.active {
background-color: #80e5ff;
color: black;
text-decoration: none !important;
}

Answer 1

当您使用position：fixed或position：absolute时，这些属性会从文档流中删除您的标记。如果您依赖于尝试使用其中一个值定位的标记大小，则会遇到问题。

此外，position：fixed可能不是您想要的，因为固定位置元素将相对于视口保持固定。你应该尝试位置：绝对。这仍将从文档流中删除该元素，但它将根据下一个相对定位的父元素定位它。

Answer 2

import ast
d = {k : ast.literal_eval(f'[{v}]') for k, v in d.items()}

请在pd.DataFrame(d) col1 0 (100, 200) 1 (150, 124) 2 (135, 137) css。

中删除上述css

请运行代码段并查看。它按照你的期望工作。

＆＃13;

overflow: hidden;

＆＃13;

ul

＆＃13;

将UL的位置设置为固定，下拉列表不起作用

2 个答案: