html - 具有下拉菜单样式的 CSS 菜单

Question

我正在为一个刚开始创业的 friend 制作这个简单的工作列表/客户/库存管理平台。

它是用 html、php 和 css 构建的。

我面临的问题是页面 CSS。 子菜单的宽度正在缩小并且无法更改。 菜单基于 w3schools 示例，在这里和那里我发现了谷歌搜索/SO 搜索。但是找不到原因以及如何解决我的问题。

body {
  margin: 0;
}

ul {
  list-style-type: none;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #003366;
}

li {
  display: inline-block;
  position: relative;
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #0066CC;
}

li.dropdown {
  display: inline-block;
  border-right: 1px solid #bbb;
}

li.right {
  float: right;
}

.arrow {
  font-size: 8px;
  line-height: 0%;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

<!-- Header -->
<header id="header">
  <nav id="nav">
    <ul>

      <li class="dropdown">
        <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Pedidos de Reparação</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Cliente</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Stock</a>
        </div>
      </li>

      <li class="right"><a href="#">Deltronic</a></li>

    </ul>
  </nav>
</header>
<!-- Header -->

<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>

我设置了一个jsfiddle也是例子。

希望有人能帮助我理解为什么会这样，并最终实现我所寻求的结果。

Answer 1

如果我没理解错的话，您不希望下拉菜单的内容分成两行。

要实现这一点，只需将 white-space: nowrap; 添加到 dropdown-content a 的规则中:

body {
  margin: 0;
}

ul {
  list-style-type: none;
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #003366;
}

li {
  display: inline-block;
  position: relative;
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #0066CC;
}

li.dropdown {
  display: inline-block;
  border-right: 1px solid #bbb;
}

li.right {
  float: right;
}

.arrow {
  font-size: 8px;
  line-height: 0%;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  white-space: nowrap;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  display: block;
}

<!-- Header -->
<header id="header">
  <nav id="nav">
    <ul>

      <li class="dropdown">
        <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Pedidos de Reparação</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Cliente</a>
        </div>
      </li>

      <li class="dropdown">
        <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a>
        <div class="dropdown-content">
          <a href="#">Adicionar Stock</a>
        </div>
      </li>

      <li class="right"><a href="#">Deltronic</a></li>

    </ul>
  </nav>
</header>
<!-- Header -->

<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>
<p> weeeeeeeeeee </p>