<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 id="navigation"> <ul class="top-level"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact</a></li> <li> <a href="#">Portfolio</a> <ul class="sub-level"> <li><a href="#">Logo Design</a></li> <li><a href="#">Mobile Apps</a></li> </ul> </li> <li> <a href="#">Services</a> <ul class="sub-level"> <li><a href="#">Web Development</a> </li> <li><a href="#">Logo Design</a></li> <li> <a href="#">Web Hosting</a> <ul class="sub-level"> <li><a href="#">Linux</a></li> <li><a href="#">Windows</a></li> </ul> </li> </ul> </li> <li><a href="#">Contact us</a></li> <li><a href="#">Feedback</a></li> </ul> </div>

#navigation { font-size:0.75em; width:150px; padding: 5px; } #navigation ul {margin:0px; padding:0px;} #navigation li {list-style: none;} ul.top-level {background:#fff;} ul.top-level li { margin: 0 0 3px 0; border: solid 1px #cccccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #navigation a { color: #666; cursor: pointer; display:block; height:25px; line-height: 25px; text-indent: 10px; text-decoration:none; width:100%; } #navigation a:hover{ text-decoration:none; } #navigation li:hover { background: #EFEFEF; position: relative; } ul.sub-level { display: none; } li:hover .sub-level { background: #fff; border: #fff solid; border-width: 1px; display: block; position: absolute; left: 150px; top: 5px; } ul.sub-level li { border: none; float:left; width:150px; } /************ Second Level ****************/ #navigation .sub-level { background: #fff; border: solid 1px #cccccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /************ Third Level ****************/ #navigation .sub-level .sub-level { background: #fff; margin: 0 1px 0 0; } /* Display one level after another */ li:hover .sub-level .sub-level { display:none; } .sub-level li:hover .sub-level { display:block; }