Question

我正在为刚开始创业的朋友制作这个简单的工作清单/客户/库存管理平台。

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

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

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的规则：

＆＃13;

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;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 2

您可以将w3schools的CSS文件与您的CSS文件进行比较。然后您会注意到已将position: relative;添加到li元素中。这正是你问题的原因。

li {
    display: inline-block;
    position: relative; // This is what's causing the problem
    float: left;
}

除非有任何具体的改变原因，否则只需摆脱它，你就可以了。

带有下拉菜单样式的CSS菜单

2 个答案: