堆栈内存溢出
  简体   繁体   English

如何在下拉菜单的侧面显示子菜单

[英]How to display a sub menu to the side of a drop down menu

 原文  2017-02-17 05:45:26  5   2    html/ css/ drop-down-menu

问题描述

I have a main menu bar that has a drop down menu and that menu has a sub menu. 我有一个带下拉菜单的主菜单栏，而该菜单有一个子菜单。 How do I get the sub drop down menu to display to the left of "drop down 2" link in the first drop down menu? 如何使子下拉菜单显示在第一个下拉菜单的“下拉列表2”链接的左侧？ I would also like to align the top of the sub menu to the top of the "drop down 2" link. 我还想将子菜单的顶部与“下拉列表2”链接的顶部对齐。 Right now it's appearing below and to the left of the link. 现在，它显示在链接的下方和左侧。

HTML: HTML： 

<img src="#" width="100%" height="100px">

<div class="TopMenuBar">
  <ul>
    <li><a href="#">Side</a></li>
    <li class="dropdown"><a href="#">menu</a>
      <div class="dropdown-menu">
        <ul>
          <li><a href="#">drop down 1</a></li>
          <li class="sub-dropdown"><a href="#">drop down 2</a>
            <div class="sub-dropdown-menu">
              <ul>
                <li><a href="#">sub drop down 1</a></li>
                <li><a href="#">sub drop down 2</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">drop down 3</a></li>
        </ul>
      </div>
    </li><a href="#">Bar</a></li>
  </ul>
</div>

<div class="SideMenuBar">
  <ul>
    <li><a href="#">Side</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Bar</a></li>
  </ul>
</div>


<h1>h1 Header</h1>
<main>
  <h2>h2 Header</h2>
  <p>Main paragraph</p>
  <a href="#">Main link</a>
  <ul>
    <li>Main list item</li>
    <li>Main list item</li>
    <li>Main list item</li>
  </ul>
  <h2>h2 Header</h2>
  <p>Main paragraph</p>
  <a href="#">Main link</a>
  <ul>
    <li>Main list item</li>
    <li>Main list item</li>
    <li>Main list item</li>
  </ul>
</main>

CSS: CSS： 

.TopMenuBar {
  border: none;
  background-color: purple;
  width: 100%;
  margin: 0;
  padding: 0;
}

.TopMenuBar>ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.TopMenuBar>ul, .dropdown-menu>ul, .sub-dropdown-menu>ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.TopMenuBar>li {
  display: inline;
}

.TopMenuBar a, .dropdown-menu a, .sub-dropdown-menu a{
  color: white;
  text-decoration: none;
  padding: 20px;
  display: block
}

/* Applys to all links under class TopMenuBar on hover */
.TopMenuBar a:hover {
  background-color: #b14eb1;
  color: black;
}

.dropdown-menu {

}

.dropdown-menu, .sub-dropdown-menu{
  display: none;
  background-color: purple;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  z-index: 1;

}

/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

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

.sub-dropdown:hover .sub-dropdown-menu{
  display: table;
}



.SideMenuBar {
  background-color: orange;
  margin-left: 20px;
  margin-top: 0;
  display: flex;
  height: 100vh;
  float: left;
}

.SideMenuBar ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

.SideMenuBar li a {
  color: white;
  text-decoration: none;
  padding: 20px;
  display: list-item;
}

.SideMenuBar li a:hover {
  background-color: #fcbf7e;
  color: black;
}

main {
  padding-left: 10px;
  display: table
}

h1 {
  text-align: center;
}

here is a working model at codepen 这是Codepen的工作模型

2 个解决方案

解决方案1
 4 已采纳  2017-02-17 05:54:06

Add this to the bottom of your stylesheet. 将此添加到样式表的底部。 

.sub-dropdown{
  position: relative;
}
.sub-dropdown-menu{
  left: 100%;
  top: 0;
}

more here http://codepen.io/hunzaboy/pen/jyRoWB 更多在这里http://codepen.io/hunzaboy/pen/jyRoWB

解决方案2
 0  2017-02-17 06:05:08

See This code example, It may help you 请参见此代码示例，它可能对您有帮助 

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
      .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>
  </head>
  <body>
     <div class="container">
     <br>
        <div class="row">
          <div class="dropdown">
            <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
                Dropdown <span class="caret"></span>
            </a>
            <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">3rd level</a></li>
                      <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </body>
  </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在此下拉菜单中显示子菜单项 - how to display the sub-menu items in this drop-down menu 带有子菜单的下拉菜单 - Drop Down Menu with Sub Menu 带有下拉菜单的侧面菜单 - side menu with drop down menu 如何将子菜单添加到引导程序 5 中的下拉菜单项？ - how to add a sub menu to a drop down menu item in bootstrap 5? 如何将下拉子菜单代码添加到此菜单 - How can I add drop down Sub menu code to this menu 如何在两列下拉菜单中显示子菜单 - how to show sub menu in a two column drop down menu 当鼠标hover在其上时如何将Bootstrap子下拉菜单修复到左侧 - How to fix Bootstrap sub drop-down menu to the left side when mouse hover on it 下拉菜单倾斜到一边？ - Drop down menu tilted to the side? 如何使用Jquery显示下拉菜单？ - How to display drop down menu with Jquery? 如何在下拉菜单中并排放置 li？ - How to put li side by side in drop down menu?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM