Question

这可能是一个简单的解决方案，但我对此大发雷霆。我试图将鼠标悬停在打开另一个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>

我尝试过使用display：block;虽然我可以，但由于某种原因，我无法使背景宽度跨越下拉的宽度。我仍然是一名初学者，可以利用一些帮助引导我朝着正确的方向前进。你知道我可以在哪里添加CSS来进行调整吗？任何帮助将不胜感激。

Answer 1

通过为列表项提供固定宽度，背景颜色将显示在该宽度上，而不是仅显示文本和填充的大小。

这是您的代码段，以及ul>li类的以下内容：

width: 50px;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果你不能设置一个固定的宽度，你可以摆脱浮动：在ul＆gt; li li选择器中将其设置为float：none。当我在开发人员工具中测试时似乎没问题，我无法看到在该元素中有浮动的特殊原因。

使li背景颜色跨度全ul宽度CSS

2 个答案: