Bootstrap 3 - SubMenu

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<!-- Parent Menu -->
<ul class="dropdown-menu" id="parentMenu"
    role="menu" aria-labelledby="dropdownMenu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    
    <!-- Child Menu -->
    <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level</a></li>
            
            <!-- Grandchild Menu -->
            <li class="dropdown-submenu">
                <a href="#">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>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24414485/1366033'>Dropdown-submenu</a><br/>
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3.0 Skeleton</a><br/>
<div>

CSS

#parentMenu {
    display: block;
    top: 0;
}

/* Helps position submenu */
.dropdown-submenu {
    position: relative;
}
/* Menus under the submenu should show up on the right of the parent */
.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;
}
/* Make submenu visible when hovering on link */
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
/* Add carot to submenu links */
.dropdown-submenu>a:after {
    display:block;
    float:right;
    
    /*simple */
    content: "►";
    color: #cccccc;
    
    /* looks a little better */
    content:" ";
    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;
}
/* Change carot color on hover */
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}