Skip to content

Instantly share code, notes, and snippets.

@subchen
Last active August 29, 2015 14:08
Show Gist options
  • Save subchen/146f6ff7b060f39c3ea7 to your computer and use it in GitHub Desktop.
Save subchen/146f6ff7b060f39c3ea7 to your computer and use it in GitHub Desktop.
Bootstrap3 添加下拉菜单的子菜单 dropdown-submenu
.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 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:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover > a:after {
border-left-color:#ffffff;
}
.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;
}
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment