<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container"> <div class="row"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">ContactUs</a></li> <li><a href="#">Our</a></li> </ul> <form class="navbar-form navbar-left " > <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="search"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> <div class="dropdown nav navbar-nav navbar-right "> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span id="selectedID">Dropup Example</span> <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#" onclick="selectedItem(this)">HTML</a></li> <li><a href="#" onclick="selectedItem(this)">CSS</a></li> <li><a href="#" onclick="selectedItem(this)">JavaScript</a></li> <li class="divider"></li> <li><a href="#" onclick="selectedItem(this)">About Us</a></li> </ul> </div> </div> </nav> </div> </div>

.dropdown{ padding-top:10px; } .navbar{ background-color:#cccccc; color:black; border-color:#cccccc; } .active{ background-color:red; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { background-color:#cccccc; }

function selectedItem(obj){ document.getElementById("selectedID").innerText=obj.innerText; }