<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 ----------> <ul class="sidebarservices"> <li class="head">List of Services</li> <li><a href="#">Networking Services</a></li> <li><a href="#">Troubleshooting Services</a></li> <li><a href="#">Internet Services</a></li> <li><a href="#">Server Services</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">PC & Printer Repair Services</a></li> <li><a href="#">And more...</a></li> </ul>

.sidebarservices { position: absolute; width: 100%; float: left; border:1px solid blue; } .sidebarservices .head { text-align:center; font-size:15pt; background:gray; color:white; } .head:hover { background:gray !important; cursor: initial; } .sidebarservices li { list-style:none; background-color:#0e6eb7; margin:5px 10px; text-align:left; padding: 10px 0 10px 20px; border-radius:5px 5px; cursor:pointer; } .sidebarservices li a { text-decoration:none; color:white !important; font-family: Century Gothic, sans-serif; } .sidebarservices li:hover { background:black; color:black; }