Question

我的菜单和子菜单有css宽度问题

我的菜单很像 -

<ul>
<li> Menu <div style="diplay:none"> Submenu </li>
<li> Menu <div style="diplay:none"> Submenu </li>
</ul>

当<li>悬停在<li>显示屏上时，<li>的宽度为自动，但当div宽度大于<li>时，则存在间隙

我希望每当我悬停时<li>宽度都不会移动

我有一个解决方案可以在我悬停时保持parseAll宽度固定吗？

由于

Answer 1

通常，下拉菜单绝对位于相对定位的父元素中，因此它们不会占用任何空间。

这是一个基本的例子。根据您的需要进行修改。

ul, li {
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  background-color: rgba( 123, 123, 123, 1 );
  cursor: pointer;
}
.menu li:hover {
  background-color: rgba( 123, 123, 123, 0.5 );
}
.has-submenu {
  position: relative;
}
.has-submenu li {
  display: block;
}
.has-submenu > ul {
  display: none;
  position: absolute;
  width: 100%;
}
.has-submenu:hover > ul {
  display: block;
}

<ul class="menu">
  <li>Item</li>
  <li class="has-submenu">
    Item with submenu
    <ul>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item</li>
</ul>

Css显示 - 悬停在li上时的宽度菜单

1 个答案: