Twitter bootstrap 引导菜单设计问题_Twitter Bootstrap_Twitter Bootstrap 3

Twitter bootstrap 引导菜单设计问题

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap 引导菜单设计问题,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我正在使用Bootstrap3.2.0。设计非常好，但现在我面临一个创建菜单的问题，如下所示：为了设计菜单，我在中编写了代码，下面是我的示例代码： <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="row"> &

我正在使用Bootstrap3.2.0。设计非常好，但现在我面临一个创建菜单的问题，如下所示：

为了设计菜单，我在中编写了代码，下面是我的示例代码：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="row">
                <ul class="topmenu">
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                </ul>
                <ul class="submenu">
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>



主页
主页
主页
主页
主页




子菜单
子菜单




子菜单
子菜单




子菜单
子菜单




子菜单
子菜单




子菜单
子菜单

我无法管理图像菜单上方的菜单。我如何设计这个？谢谢。

：这是代码

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div class="container-fluid">
  <ul class="nav navbar-nav navbar-left">
    <li><a href="#">Link</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home1 <b class="caret"></b></a>
      <ul class="dropdown-menu">

        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2</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>
            <li class="divider"></li>

            <li>
              <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2</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>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>  

            </li>
          </ul>
        </li>

        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2 <b class="caret"></b></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>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home3 <b class="caret"></b></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>
        <li class="divider"></li>
        <li><a href="#">Separated link...</a></li>
      </ul>
    </li>

  </ul>
</div>
</nav>

如果您想要菜单中的多个级别，则此代码是必需的，否则不要添加以下代码

<style>

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

</style>


.下拉子菜单{
位置：相对位置；
}
.下拉子菜单>.下拉菜单{
排名：0；
左：100%；
利润上限：-6px；
左边距：-1px；
-webkit边界半径：0 6px 6px 6px；
-moz边界半径：0 6px 6px；
边界半径：0 6px 6px 6px；
}
.下拉子菜单：悬停>.下拉菜单{
显示：块；
}
.下拉子菜单>a:之后{
显示：块；
内容：“；
浮动：对；
宽度：0；
身高：0；
边框颜色：透明；
边框样式：实心；
边框宽度：5px 0 5px 5px；
左边框颜色：#ccc；
边缘顶部：5px；
右边距：-10px；
}
.下拉子菜单：悬停>a:之后{
左边框颜色：#fff；
}
.下拉式子菜单.向左拉{
浮动：无；
}
.下拉子菜单.向左拉>.下拉菜单{
左-100%；
左边距：10px；
-webkit边界半径：6px 0 6px 6px；
-moz边界半径：6px 0 6px 6px；
边界半径：6px 0 6px 6px；
}

菜单的另一种方式

<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid" >
<div class = "row" style = "background-color:orange">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class = "row" style = "background-color:green">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class = "row" style = "background-color:green">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>


</div>
</nav>

Hi@kelgwiin，谢谢你的回答，你看到我的扑克牌了吗。有两个步骤的菜单，无论是顶部还是子部分。下拉菜单可以挂在我提到的任何部分。Hellow@Shoel，我看到了你的plunker，你使用的语法不正确。你必须使用每个标签的对应类，否则它不会