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>
<li id="navPayments" class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Movies<b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Scary</a>
            <ul class="dropdown-menu">
                <li ><a tabindex="-1" href="#">Second Violent</a></li>
                <li ><a tabindex="-1" href="#">Second Extortion</a></li>
                <li ><a tabindex="-1" href="#">Second Evil</a></li>
            </ul>
        </li>   
    </ul>
</li>







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