子菜单为Bootstrap菜单创建

Question

我正在使用this template，我想制作子菜单，但我没有Bootstrap知识，所以我很难重新创建它。你可以帮忙吗？

我想知道如何在以下代码中创建子菜单。

我的代码：

HTML：

<div class="collapse navbar-collapse">
  <ul class="nav pull-right navbar-nav">
    <li> 
    <a class="MainMenub" href="#service" >Company</a>
    <ul>
      <li> <a href="#">Sub Menu 1</a>  </li>
    </ul>
    </li>
  </ul>
</div> 

CSS：

#header .navbar {
    background: #2e3949;
    border-radius: 0px;
    margin-bottom: 0px;
}
#header{
    background: #2e3949;
}
#header .topnavbar {
    height: 100px; 
}
#header .navbar-header a {
    font-family: "Pacifico", Sans-serif;
    font-size: 2.2em;
    color: white;
    line-height: 60px; 
}

#header .navbar-toggle, #header .nav {
    margin-top: 35px; 
}

#header .navbar-fixed-top .navbar-toggle, 
#header .navbar-fixed-top .nav {
    margin-top: 15px; 
}
#header .navbar-fixed-top  .navbar-header a {
    line-height: 30px; 
    text-decoration: none;
}

#header .navbar-nav .active a,
#header .navbar-nav a:hover {
    background-color: #e96269;
}

#header .navbar-nav a,
#header .navbar-nav .active a {
    font-family: "PT Sans";
    font-weight: bold;
    padding: 5px 20px;
    margin-right: 5px;
    border-radius: 15px;
    color: white;
    font-size: 1.25em;
}

#header .navbar-nav a {
    background-color: #2e3949;

    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    -ms-transition: background-color .2s;
    transition: background-color .2s;
}

#header .navbar-nav .active a:hover {
    background-color: #fb3c46;

    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    -ms-transition: background-color .2s;
    transition: background-color .2s;
}
#header .navbar-nav a:active {
    background-color: red;
}
#header .navbar-header i {
    font-weight: bold;
    color: white;
    font-size: 1.5em;
}

#header .navbar.topnavbar {
    -webkit-animation: movetextdown 500ms ease;
    -moz-animation: movetextdown 500ms ease;
    -ms-animation: movetextdown 500ms ease;
    -o-animation: movetextdown 500ms ease;
    animation: movetextdown 500ms ease;
}

#header .navbar-fixed-top.navbar {
    -webkit-animation: moveBottom 500ms ease;
    -moz-animation: moveBottom 500ms ease;
    -ms-animation: moveBottom 500ms ease;
    -o-animation: moveBottom 500ms ease;
    animation: moveBottom 500ms ease;
}

菜单视图：

Answer 1

将此代码用于子菜单：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#" class="active">Company</a></li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu 1<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li><a href="#">Option 3</a></li>
            </ul>
        </li>
    </ul>
</div>

别忘了添加boostrap库：

  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript" src="js/bootstrap.min.js"></script>

对于两列子菜单，请使用以下html：

<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu 1<span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
    <div class="col-md-6">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
    </div>
    <div class="col-md-6">
        <li><a href="#">Option 4</a></li>
        <li><a href="#">Option 5</a></li>
        <li><a href="#">Option 6</a></li>
    </div>
    </ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu 2<span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
    </ul>
</li>

对于两列，您可能需要更广泛的下拉列表：

.dropdown-menu {
    min-width:250px;
}

Answer 2

以下是demo：http://jsbin.com/bixiwu/1 您需要分配课程＆＃34;下拉菜单＆＃34;和角色＆＃34;菜单＆＃34;。 Bootstrap documentation将提供很多帮助：bar

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <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>