Question

问题：

查看要约和li：

放置position: absolute

之后

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

我试图更改display：属性，并在HTML中的“ Offers”一词之前和之后放置空格。这些空格有效，但我不喜欢它，因为“优惠”看起来比其他选项有更多的空间。

.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时，我希望下拉菜单不移动。而且我想减小锂的黑色背景的宽度

Answer 1

这是因为子菜单正在占据一席之地，并且其父li变宽了。

一种可能的解决方案是设置ul子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>

Answer 2

问题在于下拉列表中列表项的最小内容大小，该大小大于顶部菜单中父列表项的大小。

例如“包装”以120像素渲染，而“报价”为98像素。

最简单的解决方案是根据最长单词的最大内容大小为所有列表项设置最大宽度（虽然不是很动态）。

否则，请使用position:absolute来设置子菜单，如下例所示：

https://codepen.io/skippingredpanda/pen/xNrxVg

Answer 3

一切都好，不用了，谢谢大家

在显示<li>

3 个答案: