Question

所以即时建立一个2级导航，我的问题是当我悬停父元素时，子菜单不会使链接向左浮动，所以它们是水平的。我知道这是因为第二级是<li>标签，不超过约70 px左右。

我如何克服父母的宽度？

这是导航：

<nav>
<ul>
    <li><a href="#">Om rbs</a>
    </li>
    <li><a href="#">Gratis</a>
    </li>
    <li><a href="#">Kurser</a>

        <ul>
            <li><a href="#">Foredrag</a>
            </li>
            <li><a href="#">Workshops</a>
            </li>
            <li><a href="#">Proces med konsulent</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Bliv Certifikeret</a>
    </li>
    <li><a href="#">Workshops</a>
    </li>
    <li><a href="#">Shop</a>
    </li>
    <li><a href="#">Kontakt</a>
    </li>
    <li><a href="#">Login</a>
    </li>
</ul>
</nav>

风格：

nav {
      margin: 0;
      padding: 0;
      width: 100%;
      background-color: #2d2d2d;
  }
  nav::after {
      display: block;
      clear: both;
      content:'';
  }
  nav a {
      font-size: 16px;
      font-family:'Open Sans Condensed', 'Open Sans', Helvetica, Arial, sans-serif;
      color: #fff;
      text-transform: uppercase;
  }
  nav > ul {
      position: relative;
      float: right;
      list-style: none;
      padding: 0;
      margin: 0;
  }
  nav > ul > li {
      position: relative;
      float: left;
      border-right: solid 1px rgba(255, 255, 255, 0.4);
      padding: 10px 0;
  }
  nav > ul > li::after {
      position: absolute;
      bottom: -8px;
      left: 50%;
      margin-left: -6px;
      display: none;
      content:'';
      width: 12px;
      height: 12px;
      background-color: #fff;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  nav > ul > li > a:hover {
      color: #fff;
      background-color: #3e3e3e;
  }
  nav > ul > li > a {
      padding: 10px 20px;
  }
  nav > ul > li:hover > ul {
      display: block;
  }
  nav > ul > li:hover::after {
      display: block;
  }
  nav > ul > li > ul {
      position: absolute;
      padding: 0;
      top: 100%;
      left: 0;
      list-style: none;
      display: none;
  }
  nav > ul > li > ul > li {
      float: left;
      padding: 10px 0;
  }
  nav > ul > li > ul > li > a {
      color: #7c7c7c;
      white-space: nowrap;
      padding: 10px 20px;
  }
  nav > ul > li > ul > li > a:hover {
      color: #000;
      background-color: #fff;
  }

Codepen here

Answer 1

更新以下两种样式。

 nav > ul > li > ul {
  position: absolute;
  padding: 0;
  top: 100%;
  left: 0;
  list-style: none;
  display: none;
  white-space:nowrap; /* This will make all the links in one line */
  }
  nav > ul > li > ul > li {
  display:inline-block;
  padding: 10px 0;
  }

DEMO

使子菜单水平而不是垂直

1 个答案: