Skip to content

Instantly share code, notes, and snippets.

@JumpLink
Created October 24, 2013 16:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save JumpLink/7140006 to your computer and use it in GitHub Desktop.
Save JumpLink/7140006 to your computer and use it in GitHub Desktop.
lesscss version of bootstrap3 dropdown submenu solution (shown on mouse-over). css-version: http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/
/* css hover version of .dropdown */
.dropdown-hover {
.dropdown ();
&:hover {
> .dropdown-menu {
display: block;
}
}
}
/* new dropdown-submenu (css hover version) */
.dropdown-submenu-hover {
.dropdown ();
position:relative;
> .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;
}
> 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: @dropdown-caret-color;
margin-top:5px;
margin-right:-10px;
}
&:hover {
background-color: @dropdown-link-hover-bg;
> .dropdown-menu {
display:block;
}
> a {
color: @dropdown-link-hover-color;
&:after {
border-left-color: @dropdown-caret-hover-color;
}
}
}
.pull-left {
float:none;
> .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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment