<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container"> <div class='row' id='cssmenu'> <ul class="col-lg-12 list-inline"> <li class='active'><a href='#'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Products</span></a> <ul class="col-lg-12 list-inline"> <li><a href='#'><span>Product 1</span></a></li> <li><a href='#'><span>Product 2</span></a></li> <li class='last'><a href='#'><span>Product 3</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>About</span></a> <ul> <li><a href='#'><span>Company</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300); #cssmenu { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif; font-size: 10px; line-height: 15px; text-transform: uppercase; text-align: left; } #cssmenu > ul { width: auto; list-style-type: none; padding: 0; margin: 0; background: #ffffff; border: 1px solid #ece6e8; border-bottom: 3px solid #d9ced2; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } #cssmenu > ul li#responsive-tab { display: none; /* Hide for large screens */ } #cssmenu > ul li { display: inline-block; *display: inline; zoom: 1; } #cssmenu > ul li.right { float: right; } #cssmenu > ul li.has-sub { position: relative; } #cssmenu > ul li.has-sub:hover ul { display: block; } #cssmenu > ul li.has-sub ul { display: none; width: 250px; position: absolute; margin: 0; padding: 0; list-style-type: none; background: #ffffff; border: 1px solid #ece6e8; border-bottom: 3px solid #d9ced2; border-top: 0 none; } #cssmenu > ul li.has-sub ul li { display: block; } #cssmenu > ul li.has-sub > a { background-image: url('images/caret.png'); background-repeat: no-repeat; background-position: 90% -95%; } #cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.has-sub > a:hover { background: #d80041 url('images/caret.png') no-repeat; background-position: 90% 195%; } #cssmenu > ul li a { display: block; padding: 12px 24px 11px 24px; text-decoration: none; color: #747474; text-shadow: 0px 1px 0px #fff; } #cssmenu > ul li a.active, #cssmenu > ul li a:hover { background: #d80041; color: #fff; text-shadow: 0px 1px 0px #000; } @media (max-width: 600px) { #cssmenu > ul { width: 100%; } #cssmenu > ul li#responsive-tab { display: block; } #cssmenu > ul li#responsive-tab a { background: url('images/menu.png') no-repeat; background-position: 95% -35%; } #cssmenu > ul li#responsive-tab a:hover { background-color: #d80041; background-position: 95% 135%; } #cssmenu > ul li { display: none; } #cssmenu > ul li.right { float: none; } #cssmenu > ul li.has-sub { position: relative; } #cssmenu > ul li.has-sub ul { display: block; position: static; width: 100%; background: #ffffff; border: 0 none; } #cssmenu > ul li.has-sub ul li { display: block; } #cssmenu > ul li.has-sub ul li a span { display: block; padding-left: 24px; } #cssmenu > ul li.has-sub > a { background-image: none; } } /* Make sure they show even if hidden in mobile view by JS */ @media (min-width: 600px) { #cssmenu > ul > li.collapsed { display: inline-block !important; *display: inline; zoom: 1; } #cssmenu > ul ul li.collapsed { display: block !important; } }

( function( $ ) { $( document ).ready(function() { // Cache the elements we'll need var menu = $('#cssmenu'); var menuList = menu.find('ul:first'); var listItems = menu.find('li').not('#responsive-tab'); // Create responsive trigger menuList.prepend('<li id="responsive-tab"><a href="#">Menu</a></li>'); // Toggle menu visibility menu.on('click', '#responsive-tab', function(){ listItems.slideToggle('fast'); listItems.addClass('collapsed'); }); }); } )( jQuery );