Css 使用引导的垂直主菜单的水平子菜单

是否有任何方法可以使用引导为垂直菜单结构创建水平子菜单我还没有看到任何具有垂直主菜单方向的子菜单。菜单结构的示例结构与此类似，这可能对您有所帮助。可以找到

HTML:

JS:

我们走

下拉菜单使用嵌套的“ul”，绝对位置，我们将从

显示更改为：无至<代码>显示：块当需要悬停时

大概是这样的：

<ul>
  <li><a href="#">…</a>
    <ul>
      <li><a href="#">…</a>
        <ul> … <!-- And so on. -->
        </ul>
      </li>
  <li>
</ul>

一个活生生的例子：

以及承诺的CSS版本：

#main-nav ul {
  margin: 0;
  padding: 0;
  border-right: 1px solid black;
  width: 150px;
  list-style-type: none; 
}

#main-nav ul li { position: relative; }
#main-nav ul li:hover:before {
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid #999;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  height: 0px;
  width: 0px;
  margin: auto; 
}

#main-nav ul li:hover > ul { display: block; }
#main-nav ul li a {
  padding: 7px 10px;
  display: block; 
}

#main-nav ul li a:hover { color: red; }
#main-nav ul li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  border-right: 1px solid #ccc; 
}

超级，谢谢你的现场示例，我怎样才能为主菜单项目添加更多的子菜单作为内联菜单，因为当我为项目添加子菜单时，它是垂直结构。我不明白你的意思，但也许你想添加类似项目1.1、项目1.2等的内容？实例：
$('.collapse').on('shown.bs.collapse', function (e) {
  $('.collapse').not(this).removeClass('in');
});

$('[data-toggle=collapse]').click(function (e) {
  $('[data-toggle=collapse]').parent('li').removeClass('active');
  $(this).parent('li').toggleClass('active');
  $("#submenu").show();
});

<ul>
  <li><a href="#">…</a>
    <ul>
      <li><a href="#">…</a>
        <ul> … <!-- And so on. -->
        </ul>
      </li>
  <li>
</ul>

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a>
      <ul>
        <li><a href="#">Project 1</a>
          <ul>
            <li><a href="#">Project 2</a>
              <ul>
                <li><a href="#">Project 3</a>
                  <ul>
                    <li><a href="#">Project 4</a>
                      <ul>
                        <li><a href="#">Project 5</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

#main-nav{
  ul{ /* Those lines are used only for styling */
    margin: 0;
    padding: 0;
    border-right: 1px solid black;
    width: 150px;
    list-style-type: none;
    li{
      position: relative; /* This is important when using absolute positions. */
      &:hover{
        &:before{ /* arrow styles */
              content: "";
              top: 0;
              bottom: 0;
              right: 0;
              border-top: 5px solid transparent;
              border-right: 5px solid #999;
              border-bottom: 5px solid transparent;
              border-left: 5px solid transparent;
              position: absolute;
              height: 0px;
              width: 0px;
              margin: auto;
        }
        > ul{
          display: block; /* IMPORTANT: This will show your dropdown menus when hover in the parent li. */

          /*&:before { // I don't like this part but if you enable it, it will make child ul's look closer to your design.
              content: "";
              position: absolute;
              right: 0;
              top: -65px;
              bottom: -35px;
              width: 1px;
              background-color: #ccc;
          }*/
        }
      }//:hover

      a{ /* Those lines are used only for styling */
        padding: 7px 10px;
        display: block;
        &:hover{
          color: red;
        }
      }// a

      > ul{ /* This is what makes the magic happen. */
        display: none; /* Dropdown menus are always hidden, except when you hover it's li parent */
        position: absolute; /* This will position the ul */
        top: 0;
        left: 100%; /* This will push the ul where it is needed. */
        border-right: 1px solid #ccc;
      }
    }// li
  }// ul
}

#main-nav ul {
  margin: 0;
  padding: 0;
  border-right: 1px solid black;
  width: 150px;
  list-style-type: none; 
}

#main-nav ul li { position: relative; }
#main-nav ul li:hover:before {
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid #999;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  height: 0px;
  width: 0px;
  margin: auto; 
}

#main-nav ul li:hover > ul { display: block; }
#main-nav ul li a {
  padding: 7px 10px;
  display: block; 
}

#main-nav ul li a:hover { color: red; }
#main-nav ul li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  border-right: 1px solid #ccc; 
}