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

Question

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

我的菜单是水平的 -

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

<li>的宽度是自动的，当鼠标悬停在 <li> 上时显示，但当 div 宽度大于 <li> 时,有差距

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

你有办法保持<li>吗？悬停时宽度固定？

谢谢

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>