一个简单的解决方案,但我为此绞尽脑汁。我试图将鼠标悬停在打开另一个 ul 的 li 上,一旦我将鼠标悬停在上述 ul 中的 li 上,背景就会占据 ul 背景的整个宽度。
ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 1000;
}
li {
position: relative;
cursor: pointer;
}
ul>li {
color: #000000;
float: left;
padding: 10px;
height: 22px;
}
ul>li a {
color: #000000;
text-decoration: none;
display: block;
}
ul>li li {
float: left;
clear: left;
}
ul>li ul {
display: none;
left: 0;
top: 100%;
}
ul>li li>ul {
top: 0;
left: 100%;
}
li>ul {
position: absolute;
min-width: 100%;
display: none;
background: #f0f0f0;
list-style: none;
}
li:hover>ul,
li:focus>ul {
display: block;
}
li:hover {
background: #27B3CF;
outline: 1px dotted red;
}
<ul>
<li style="color: white;">Reports
<ul>
<li>Lvl 1</li>
<li><span class="title">Show a List</span>
<ul>
<li><a href="#">Details</a></li>
</ul>
</li>
<li>Lvl 1</li>
</ul>
</li>
</ul>
我已经尝试使用显示:块; 尽我所能,但由于某种原因,我无法使背景宽度跨越下拉列表的宽度。我仍然是一个初学者,可以使用一些帮助来引导我朝着正确的方向前进。您看到我可以在哪里添加 CSS 来进行此调整吗?任何帮助将不胜感激。
通过为列表项指定固定宽度,背景颜色将显示在该宽度上,而不是仅显示文本和填充的大小。
下面是您的代码段,其中包含对ul>li
类的以下内容:
width: 50px;
ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 1000;
}
li {
position: relative;
cursor: pointer;
}
ul>li {
color: #000000;
float: left;
padding: 10px;
height: 22px;
width: 50px;
}
ul>li a {
color: #000000;
text-decoration: none;
display: block;
}
ul>li li {
float: left;
clear: left;
}
ul>li ul {
display: none;
left: 0;
top: 100%;
}
ul>li li>ul {
top: 0;
left: 100%;
}
li>ul {
position: absolute;
min-width: 100%;
display: none;
background: #f0f0f0;
list-style: none;
}
li:hover>ul,
li:focus>ul {
display: block;
}
li:hover {
background: #27B3CF;
outline: 1px dotted red;
}
<ul>
<li >Reports
<ul>
<li>Lvl 1</li>
<li><span class="title">Show a List</span>
<ul>
<li><a href="#">Details</a></li>
</ul>
</li>
<li>Lvl 1</li>
</ul>
</li>
</ul>
如果不能设置固定宽度,可以在 ul>li li 选择器中将其设置为 float:none,去掉 float:left。当我在开发人员工具中进行测试时,这似乎没问题,但我看不到在该元素中具有浮点数的特定原因。