带有辅助导航问题的CSS导航

Question

我正在尝试修复此导航菜单，我遇到了以下问题：

这是一个2级菜单，但它正在使用辅助菜单的第一个链接推送其下的主菜单的其余部分。

// Navigation
.nav {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    margin: 15px 0 0 0;

    .nav-item {
        float: left;
        display: inline;
        zoom: 1;
        a {
            display: block;
            padding: 15px 20px;
            color: #FFF;
            background: #34495E;
            &:hover {
                background: #2C3E50;
            }
        }
        ul {
            li {
                float: left;
                display: inline;
            }
        }
    }
}

<header>

            <div class="container">
                <div class="row">
                    <div class="four columns">
                        <a href="#" class="logo" title="Site (home)">Site</a>
                    </div>
                    <div class="eight columns">
                        <a id="nav-toggle" class="mobile-menu" href="#"><span></span> Menu</a>
                        <nav class="nav">
                            <ul class="nav-list">
                                <li class="nav-item"><a href="#" title="Link 1">Link 1</a>
                                    <ul>
                                        <li><a href="#" title="Link 1">Link 1</a></li>
                                        <li><a href="#" title="Link 2">Link 2</a></li>
                                        <li><a href="#" title="Link 3">Link 3</a></li>
                                        <li><a href="#" title="Link 4">Link 4</a></li>
                                        <li><a href="#" title="Link 5">Link 5</a></li>
                                        <li><a href="#" title="Link 6">Link 6</a></li>
                                        <li><a href="#" title="Link 7">Link 7</a></li>
                                        <li><a href="#" title="Link 8">Link 8</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item"><a href="#" title="Link 2">Link 2</a></li>
                                <li class="nav-item"><a href="#" title="Awkward Long link">Awkward Long link</a></li>
                                <li class="nav-item"><a href="#" title="Link 3">Link 3</a></li>
                                <li class="nav-item"><a href="#" title="Link 4">Link 4</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

        </header>

Answer 1

您需要移除display:inline s，制作nav-item position:relative，然后制作第二级别position:absolute; top:100%;（您可能还需要为此添加宽度）：

＆＃13;

＆＃13;

// Navigation
.nav {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 900;
  margin: 15px 0 0 0;
}
.nav .nav-item {
  float: left;
  position:relative;
}
.nav .nav-item a {
  display: block;
  padding: 15px 20px;
  color: #FFF;
  background: #34495E;
}
.nav .nav-item a:hover {
  background: #2C3E50;
}
.nav .nav-item ul {
  position:absolute; 
  top:100%;
}
.nav .nav-item ul li {
  float: left;
}

＆＃13;

<header>

  <div class="container">
    <div class="row">
      <div class="four columns">
        <a href="#" class="logo" title="Site (home)">Site</a>
      </div>
      <div class="eight columns">
        <a id="nav-toggle" class="mobile-menu" href="#"><span></span> Menu</a>
        <nav class="nav">
          <ul class="nav-list">
            <li class="nav-item"><a href="#" title="Link 1">Link 1</a>
              <ul>
                <li><a href="#" title="Link 1">Link 1</a>
                </li>
                <li><a href="#" title="Link 2">Link 2</a>
                </li>
                <li><a href="#" title="Link 3">Link 3</a>
                </li>
                <li><a href="#" title="Link 4">Link 4</a>
                </li>
                <li><a href="#" title="Link 5">Link 5</a>
                </li>
                <li><a href="#" title="Link 6">Link 6</a>
                </li>
                <li><a href="#" title="Link 7">Link 7</a>
                </li>
                <li><a href="#" title="Link 8">Link 8</a>
                </li>
              </ul>
            </li>
            <li class="nav-item"><a href="#" title="Link 2">Link 2</a>
            </li>
            <li class="nav-item"><a href="#" title="Awkward Long link">Awkward Long link</a>
            </li>
            <li class="nav-item"><a href="#" title="Link 3">Link 3</a>
            </li>
            <li class="nav-item"><a href="#" title="Link 4">Link 4</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

</header>

＆＃13;

＆＃13;

＆＃13;