Question

我创建了一个包含多个子菜单的菜单。我一直在寻找方法让子菜单从原始菜单到子菜单以水平方式下拉，然后到最后的子菜单（我有时会偶然得到它，但后来我搞砸了所有内容并返回到我的原始水平菜单与垂直子菜单）。我已经尝试将它们更改为内联块，静态和块，但我不能强制它工作。有没有更简单的方法？我错过了什么？

＆＃13;

/* Navigation Bar Menu */

nav {
  color: #F00;
  min-width: 100%;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  display: inline-block;
  float: none;
  white-space: nowrap;
}

nav a {
  display: block;
  padding: 0 10px;
  color: #F00;
  font-size: 20px;
  line-height: 30px;
  text-decoration: none;
}

nav a:hover {
  color: #FFF;
  background-color: #CCC;
  transition: all .3s ease;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

nav ul li:hover>ul {
  display: inherit;
  transition: all .3s ease;
}

nav ul ul li {
  min-width: 170px;
  display: list-item;
  position: relative;
}

nav ul ul ul {
  position: absolute;
  top: 0;
  left: 100%;
}

＆＃13;

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a>
      <ul>
        <li><a href="aboutus.html">Our Team</a></li>
      </ul>
    </li>
    <li><a href="services.html">Services</a>
      <ul>
        <li><a href="cardio.html">Cardiovascular</a>
          <ul>
            <li><a href="perfusion.html">Perfusion</a></li>
            <li><a href="ptca.html">PTCA & IABP</a></li>
            <li><a href="ecmo.html">ECMO</a></li>
            <li><a href="tavr.html">TAVR</a></li>
          </ul>
        </li>
        <li><a href="bloodmanagement.html">Blood Management</a>
          <ul>
            <li><a href="autotransfusion.html">Autotransfusion</a></li>
            <li><a href="plateletgel.html">Platelet Gel</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="products.html">Products</a>
      <ul>
        <li><a href="disposables.html">Disposables</a></li>
        <li><a href="products.html">Featured Products</a></li>
      </ul>
    </li>
    <li><a href="contact.html">Contact</a>
      <ul>
        <li><a href="inquiries.html">Employment Inquiries</a></li>
        <li><a href="contactform.html">Contact</a></li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

对不起，如果我错过了什么，但这是你要找的东西吗？ https://codepen.io/will0220/pen/VMMgMb

此

nav ul ul li {
 display: list-item;
}

需要删除display属性，display：list-item将其强制为行。希望这有帮助！

具有多个子菜单的水平菜单

1 个答案: