2

我想制作一个二级导航栏，但不是作为下拉菜单。它应该显示为第一行下方的第二行。示例（* 表示 是活动的）：

导航1 | 导航2* | 导航3

导航2a | 导航2b

应该是这样的：

<div class="navbar" id="topnavi">
    <div class="navbar-inner">
        <ul class="nav">
            <li>
                <a href="#">nav1</a>
                <ul class="secondlevel">
                    <li><a href="#">nav1a</a></li>
                    <li><a href="#">nav1b</a></li>
                    <li><a href="#">nav1c</a></li>
                </ul>
            </li>
            <li>
                <a href="#">nav2</a>
                <ul class="secondlevel">
                    <li><a href="#">nav2a</a></li>
                    <li><a href="#">nav2b</a></li>
                </ul>
            </li>
            <li>
                <a href="#">nav3</a>
            </li>
        </ul>
    </div>
</div>

有任何想法吗？

4

1 回答 1

1

我使用了下拉类并重写了一些样式，以便嵌套的下拉项显示为主要项下方的辅助导航。这是我理解的大方向-希望它有所帮助！

HTML：

    <div class="navbar">
      <div class="navbar-inner">
          <ul class="nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
      </div>
    </div>

CSS：

    .nav > li {
         display: inline-block;
     }
    .dropdown-menu{
         display: inline;
         position: relative;
     }
     .dropdown-menu > li{
         display:inline-block;
     }
于 2014-06-26T20:40:37.980 回答