Question

http://www.w3schools.com/code/tryit.asp?filename=FC7U4IJXIHYR

嗨，这是我用过的代码。我试图在Schulgemeinschaft中插入横向下拉 - ＆gt; Klassen，所以当我在Klassen上盘旋时会出现更多选项。有没有办法做到这一点？

Answer 1

这是一个简单的纯css菜单，有3级深度：

.menu
{
	margin-top:15px
}

.menu ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

.menu ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:bold;
	padding:0 15px;
}

.menu ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

.menu ul li.current-menu-item
{
	background:#ddd
}

.menu ul li:hover
{
	background:#f6f6f6
}

.menu ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff; 
    border: 1px solid silver;
	padding:0
}

.menu ul ul li
{
	float:none;
	width:200px
}

.menu ul ul a
{
	line-height:120%;
	padding:10px 15px
}

.menu ul ul ul
{
	top:0;
	left:100%
}

.menu ul li:hover > ul
{
	display:block
}

<div class="menu">
	<ul>
	  <li><a href="#">Menu 1</a>
		<ul>
		  <li><a href="#">Sub Menu 1</a></li>
		  <li><a href="#">Sub Menu 2 ...</a>
			<ul>
			  <li><a href="#">Deep Menu 1 ...</a>
				<ul>
				  <li><a href="#">Sub Deep 1</a></li>
				  <li><a href="#">Sub Deep 2</a></li>
				  <li><a href="#">Sub Deep 3</a></li>
					<li><a href="#">Sub Deep 4</a></li>
				</ul>
			  </li>
			  <li><a href="#">Deep Menu 2</a></li>
			</ul>
		  </li>
		</ul>
	  </li>
	  <li><a href="#">Menu 2</a>
		<ul>
		  <li><a href="#">Sub Menu 1</a></li>
		  <li><a href="#">Sub Menu 2</a></li>
		  <li><a href="#">Sub Menu 3</a></li>
		</ul>
	  </li>
	</ul>
</div>

Original reference is here

Answer 2

试试这个。应该完全按照你要求做的。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
  <div class="row">
    <h2>Multi level dropdown menu in Bootstrap 3</h2>
    <hr>
    <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>

在下拉列表中插入下拉列表

2 个答案: