<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="dropdown" id="menuStart"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> <i class="icon icon-bars"></i> </a><ul class="dropdown-menu multi-level" id="mainMenu1"><li class="dropdown-submenu dropdown 218 active"><a href="/sync_dev/" class="active">Home</a><ul class="dropdown-menu"><li class="dropdown-submenu active"><a href="/sync_dev/" title="" class="active">Sliders</a><ul class="dropdown-menu"><li class="active"><a href="/sync_dev/" title="" class="active">Mega Slider</a></li><li><a href="/sync_dev/nivo-slider">Nivo Slider</a></li></ul></li><li class="active"><a href="/sync_dev/" title="" class="active">Home - Default</a></li><li><a href="/sync_dev/one-page" title="">One Page Site</a></li></ul></li><li class="dropdown-submenu dropdown 1777"><a href="/sync_dev/about-us" title="">About Us</a><ul class="dropdown-menu"><li><a href="/sync_dev/about-us" title="">About Us</a></li><li><a href="/sync_dev/about-us-basic">About Us - Basic</a></li><li><a href="/sync_dev/team/john-doe">About Me</a></li></ul></li><li class="dropdown-submenu dropdown 346"><a href="/sync_dev/features" title="">Features</a><ul class="dropdown-menu"><li><a href="/sync_dev/grid-system">Grid System</a></li><li><a href="/sync_dev/icons">Icons</a></li><li><a href="/sync_dev/pricing-tables">Pricing Tables</a></li><li><a href="/sync_dev/elements">Elements</a></li><li><a href="/sync_dev/animations">Animations</a></li><li><a href="/sync_dev/typography">Typography</a></li></ul></li><li class="dropdown-submenu dropdown 347"><a href="/sync_dev/portfolio" title="">Portfolio</a><ul class="dropdown-menu"><li><a href="/sync_dev/portfolio" title="">4 Columns</a></li><li><a href="/sync_dev/3-columns" title="">3 Columns</a></li><li><a href="/sync_dev/2-columns" title="">2 Columns</a></li><li><a href="/sync_dev/portfolio-lightbox">Portfolio Lightbox</a></li><li><a href="/sync_dev/portfolio-timeline">Portfolio Timeline</a></li><li><a href="/sync_dev/portfolio-full-width" title="">Portfolio Full Width</a></li><li><a href="/sync_dev/portfolio/25">Single Project</a></li></ul></li><li class="dropdown-submenu dropdown 348"><a href="/sync_dev/pages">Pages</a><ul class="dropdown-menu"><li class="dropdown-submenu"><a href="/sync_dev/blog" title="">Blog</a><ul class="dropdown-menu"><li><a href="/sync_dev/blog-full-width">Blog Full Width</a></li><li><a href="/sync_dev/blog" title="">Blog With Sidebar</a></li><li><a href="/sync_dev/blog-timeline">Blog Timeline</a></li><li><a href="/sync_dev/blog/29">Single Post</a></li></ul></li><li><a href="/sync_dev/full-width">Full Width</a></li><li><a href="/sync_dev/left-sidebar">Left Sidebar</a></li><li><a href="/sync_dev/right-sidebar">Right Sidebar</a></li><li><a href="/sync_dev/custom-header">Custom Header</a></li><li><a href="/sync_dev/404-error">404 Error</a></li><li><a href="/sync_dev/team">Team</a></li><li><a href="/sync_dev/services">Services</a></li><li><a href="/sync_dev/careers">Careers</a></li><li><a href="/sync_dev/faq">FAQ</a></li></ul></li><li><a href="/sync_dev/contact-us">Contact Us</a></li></ul></div> <div class="container"> <div class="row"> <h2>Bootstrap Navigation meets Twitch Navigation</h2> <p>This is just a quick and dirty example I made to show off to a friend. Don't forget to change the theme using the dropdown above.</p> </div> <div class="row"> <h2>Navbar Styles</h2> <p>Just to show off how easy it is to theme!</p> <button type="button" class="btn btn-inverse nav-style-toggle disabled" data-type="inverse"> Inverse</button> <button type="button" class="btn btn-default nav-style-toggle" data-type="default"> Default</button> <button type="button" class="btn btn-purple nav-style-toggle" data-type="purple"> Purple</button> </div> </div>

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); .dropdown-menu { min-width:20% !important; min-height:100vh; } .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; /*left: 100%; */ left:20%; position:fixed; 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>.dropdown-menu>.dropdown-submenu>.dropdown-menu { top: 0; /*left: 100%; */ left:40%; position:fixed; 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; }

$(document).ready(function() { /* $('#dLabel').hover( function(event) { event.preventDefault(); $('#menuStart').addClass('open'); }); $('body').not('#dLabel').hover( function(event) { event.preventDefault(); $('#menuStart').removeClass('open'); }); */ });