html - 我需要帮助来修复显示 <li> 时移动的下拉菜单

Question

问题:

查看优惠和 li:

放置position: absolute之后

Current vs What I want to achieve

如何制作下拉菜单，以便当我将鼠标悬停在“优惠”上时，文本不会向左移动？我还想减小 li 的宽度，因为它对我来说太大了。

我曾尝试更改显示:属性并在 HTML 中的“优惠”一词前后放置空格。这些空间有用，但我不喜欢它，因为优惠看起来比其他选项有更多空间。

.nav {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80px;
}

.menu {
  float: right;
  line-height: 80px;
  margin: 0 9em;
  text-align: center;
  font-family: "Proxima Nova";
  text-transform: uppercase;
  font-weight: bolder;
  letter-spacing: 0px;
}

.menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.menu ul li {
  text-align: center;
  list-style: none;
  display: inline-table;
}

.menu ul li a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: lighter;
    padding: 0 20px;
    transition: all .3s ease-in-out;
}

.menu ul li a:hover {
    color: orange;
}

.menu ul li ul li {
    display: none;  /*So li dont show up unless hover */
}

.menu ul li:hover ul li {
    transition: all .3s ease;
    display: block;
    background: rgba(0, 0, 0, .6);
}

ul li:nth-child(5) a {
    color: white;
    border: 1px solid orange;
    padding: 10px 20px;
    border-radius: 4px;
    background-color: none;
    transition: all 1s ease-out;
}

ul li:nth-child(5) a:hover {
    transition: all .5s ease-in;
    background: rgba(204, 204, 204, 0.5);
    color: orange;
  }

<div class="nav">
    <div class="menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="About Us.html">About Us</a></li>
        <li><a href="Offers.html">Offers</a>
          <ul>
            <li><a href="Packages.html">Packages</a></li>
            <li><a href="Services.html">Services</a></li>
            <li><a href="Promos.html">Promos</a></li>
          </ul>
          </li>
        <li><a href="Location.html">Location</a></li>
        <li><a href="Contact.html">Contact</a></li>
      </ul>
    </div>
  </div>

当 li 显示在优惠中时，我希望下拉菜单不移动。我想减少 li 黑色背景的宽度

Answer 1

那是因为子菜单正在占据一席之地并使其父级 li 变宽。

一个可能的解决方案是设置 ul child position: absolute 这样它就不会占位。

像这样:

.menu ul ul {
  position: absolute;
}

实例:

body {
  background: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg) 0 0;
  background-size: cover;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80px;
}

.menu {
  float: right;
  line-height: 80px;
  margin: 0 9em;
  text-align: center;
  font-family: "Proxima Nova";
  text-transform: uppercase;
  font-weight: bolder;
  letter-spacing: 0px;
}

.menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.menu ul li {
  text-align: center;
  list-style: none;
  display: inline-table;
  position: relative;
}

.menu ul li a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  font-weight: lighter;
  padding: 0 20px;
  transition: all .3s ease-in-out;
}

.menu ul li a:hover {
  color: orange;
}

.menu ul ul {
  position: absolute;
  width: 100%;
}

.menu ul li ul li {
  display: none;
  /*So li dont show up unless hover */
}

.menu ul li ul li a {
  padding: 0;
  text-align: center;
}

.menu ul li:hover ul li {
  transition: all .3s ease;
  display: block;
  background: rgba(0, 0, 0, .6);
}

ul li:nth-child(5) a {
  color: white;
  border: 1px solid orange;
  padding: 10px 20px;
  border-radius: 4px;
  background-color: none;
  transition: all 1s ease-out;
}

ul li:nth-child(5) a:hover {
  transition: all .5s ease-in;
  background: rgba(204, 204, 204, 0.5);
  color: orange;
}

<div class="nav">
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="About Us.html">About Us</a></li>
      <li><a href="Offers.html">Offers</a>
        <ul>
          <li><a href="Packages.html">Packages</a></li>
          <li><a href="Services.html">Services</a></li>
          <li><a href="Promos.html">Promos</a></li>
        </ul>
      </li>
      <li><a href="Location.html">Location</a></li>
      <li><a href="Contact.html">Contact</a></li>
    </ul>
  </div>
</div>