<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="dropdown"> <ul> <li>Home</li> <li> Services <i class="fa fa-sort-desc" aria-hidden="true"></i> <ul> <li>Test</li> <li>Test</li> <li> <span style="margin-left:20px;">Test</span> <i class="fa fa-caret-right" aria-hidden="true"></i> <ul> <li>Test - 1</li> <li>Test - 2</li> <li>Test - 3</li> <li>Test - 3</li> </ul> </li> <li>Test</li> </ul> </li> <li>About Us</li> <li>Contact Us</li> <li>Blog</li> </ul> </div> </div> </div>

*{ margin: 0; padding: 0; } .dropdown{ margin: 0 auto; width: 800px; height: auto; margin-top: 10px; } .dropdown ul{ list-style:none; padding: 0; margin:0; } .dropdown ul li{ float: left; display: block; width: 150px; height: 40px; transition: background 0.2s ease, padding 0.8s linear; background: #000000; line-height: 40px; border-color: #000000; text-align: center; margin-right: 5px; cursor: pointer; } .dropdown ul li { color: #fff; position: relative; border: 1px solid #Ccc; border-radius: 50px; } .dropdown ul li:hover{ background: #808080; border-color:#808080; } .fa-sort-desc{ padding-left: 0px; position:relative; bottom:2px; } .fa-caret-right{ margin-left: 5px; } /*.right-arrow{ position: relative; top: 3px; left: 30px; } .arrow{ position: relative; top: 5px; left: 3px; }*/ .dropdown ul ul li{ margin-bottom: 5px; } .dropdown ul ul{ position: absolute; display:none; } .dropdown ul li:hover>ul{ display: block; } .dropdown ul ul ul{ margin-left: 150px; top:0; }