Question

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

nav1 | nav2 * | nav3

nav2a | nav2b

应该是这样的：

<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>

有什么想法吗？

Answer 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;
     }

Twitter Bootstrap - 第二级导航栏，但不是下拉列表

1 个答案: