<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://stackpath.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="col-sm-12"> <div class="btn-group btn-group-justified tmenu" role="group"> <div class='btn-group' role='group'> <button type='button' class='btn btn-default dropdown-toggle topmenu' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'> Menu 1 <span class='caret'></span> </button> <ul class='dropdown-menu'> <li class='topsubmenu'><a href='#' class='ptsans topsubmenu'>Page 1</a></li> <li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> Demo page</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-long-arrow-right small'></i> Page</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-long-arrow-right small'></i> 18+</a></li></ul></div><a href='#' class='btn btn-default ptsans topmenu'>Page</a><a href='#' class='btn btn-default ptsans topmenu'>Page</a> <div class='btn-group' role='group'> <button type='button' class='btn btn-default dropdown-toggle topmenu' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'> Info Menu <span class='caret'></span> </button> <ul class='dropdown-menu'> <li class='topsubmenu'><a href='#' class='ptsans topsubmenu'>Information</a></li> <li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> USA Page</a></li><li class='topsubmenu'></ul></div> <div class='btn-group' role='group'> <button type='button' class='btn btn-default dropdown-toggle topmenu' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'> News <span class='caret'></span> </button> <ul class='dropdown-menu'> <li class='topsubmenu'><a href='/index.php?page=feed' class='ptsans topsubmenu'>Feeds</a></li> <li class='topsubmenu'><a href='#' class='#'><i class='fa fa-fw fa-angle-right small'></i> Feeds</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> Feed 2</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> RooCMS</a></li></ul></div> </div> </div> </div>

.tmenu {padding: 5px;border-radius: 4px;background-color: #fff;border: 1px solid #ddd;} .topmenu {background-color: transparent;text-shadow: none;box-shadow: none;border: 0;} .topmenu:hover, .topsubmenu:hover {background: #545c68 none; color: #fff;} .topsubmenu:hover > .small {color: #545c68;}