html - block 充当内联 block ？

Question

我目前正在构建一个网站，但我的下拉导航栏无法正常工作。当我将鼠标悬停在导航栏上的每个元素上时，下拉菜单会按原样下降，但即使我的 CSS 已将它们分配为普通 block ，这些元素仍被内联阻止。

我的代码如下:

body {
  background-color: #555;
}

.navbar {
  width: 100%;
  height: 70px;
  background-color: #000000;
}

.logo {
  float: left;
  padding: 15px;
}

.navbar ul {
  margin: 0;
  padding: 0;
  float: left;
  list-style-type: none;
}

.navbar ul li {
  float: left;
}

.nav-item {
  display: block;
  padding: 15px 40px;
  height: 68px;
  line-height: 40px;
  color: white;
  text-decoration: none;
}

.nav-item:hover {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-item:focus {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-sub {
  background-color: #000000;
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-sub a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-sub a:hover {
  background-color: darkred;
}

.navbar ul li:hover .nav-sub {
  display: block;
}

<nav class="navbar">
  <div class="logo">
    <a href="~/Views/Home/Index.cshtml">
      <img src="~/Content/Pictures/CuttingEdgeWhite.png" style=" width: 200px; height: 50px;" />
    </a>
  </div>
  <ul>
    <li>
      <a href="#" class="nav-item">Electrical</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Lighting</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Energy</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">National Accounts</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Contact Us</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Service Request</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Careers</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

我已经看到让父元素向左浮动不允许内联 block 正常工作，但我不知道如何解决这个问题。任何帮助都将不胜感激!

Answer 1

修复 float 解决方案

这是最快的解决方案，您的 CSS 中有一条贪婪规则:

.navbar ul li {
  float: left;
}

此规则的问题在于它也会影响下拉列表。将此更改修复为:

.navbar > ul > li {
  float: left;
}

Flexbox 解决方案

• 用 display: flex 设置两个 ul 列表，这样可以避免使用 float 。
• 从元素中移除所有float
• 用 flex-direction: column 设置下拉 ul 列表，这样它会垂直显示。

看看下面的例子:

body {
  background-color: silver;
}

.navbar {
  width: 100%;
  height: 70px;
  background-color: #000000;
}

.logo {
  padding: 15px;
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}

.nav-item {
  display: block;
  padding: 15px 40px;
  height: 68px;
  line-height: 40px;
  color: white;
  text-decoration: none;
}

.nav-item:hover {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-item:focus {
  background-color: darkred;
  color: white;
  text-decoration: none;
}

.nav-sub {
  background-color: #000000;
  display: none;
  position: absolute;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.nav-sub ul {
  flex-direction: column;
}

.nav-sub a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.nav-sub a:hover {
  background-color: darkred;
}

.navbar ul li:hover .nav-sub {
  display: block;
}

<nav class="navbar">
  <div class="logo">
    <a href="~/Views/Home/Index.cshtml">
      <img src="~/Content/Pictures/CuttingEdgeWhite.png" style=" width: 200px; height: 50px;" />
    </a>
  </div>
  <ul>
    <li>
      <a href="#" class="nav-item">Electrical</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Lighting</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Energy</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">National Accounts</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Contact Us</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Service Request</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#" class="nav-item">Careers</a>
      <div class="nav-content">
        <div class="nav-sub">
          <ul>
            <li><a href="#">Option #1</a></li>
            <li><a href="#">Option #2</a></li>
            <li><a href="#">Option #3</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>