How to Select List Items in Dynamic Bootstrap navbar menu for WordPress

I have created a dynamic bootstrap navbar menu for WordPress. To see the menu, please visit this link: https://www.chicago-plastic-surgeons.com

Here is the html code:

<!-- Menu's Code for Twitter Bootstrap -->
<div class="navbar navbar-inverse container mainmenu" role="navigation">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
			<span class="sr-only">Toggle Naavigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="" >Navigation</a>
	</div>
	<div class="navbar-collapse collapse">
		<?php

		$args = array(
				'theme_location' => 'top-bar',
				'depth'          => 2,
				'container'      => false,
				'menu_class'     => 'nav navbar-nav',
				'walker'         => new Bootstrap_Walker_Nav_Menu()
		);
		wp_nav_menu($args);

		?>
	</div>
</div>
<!-- Menu's Code for Twitter Bootstrap -->

Here is the css code:

.mainmenu {background:#F2F0F1;border:none;margin-top:10px;margin-bottom:10px;}
.navbar-inverse .navbar-brand {color: #101010;}
.navbar-inverse .navbar-brand:hover {color: #101010;}
.navbar-inverse .navbar-toggle {border-color: #333333;background:#333333;}
.navbar-collapse {padding-right: 0px;padding-left: 0px;}
.navbar-brand {display:none;}
.mainmenu ul.navbar-nav {margin-left: -10px;}
.mainmenu ul.navbar-nav li {margin-top: 12px;margin-left: 10px;}
.mainmenu ul.navbar-nav li a {color:#101010;padding: 5px 2px;font-family: 'Open Sans', sans-serif;font-size:18px;}
.mainmenu ul.navbar-nav li a:hover {color:#fff;background:#13B4E3;}

But there are some things that still need to be done. The top nag “Special Promotions” and “Board Certified” need to have that box around them so they stand out. To see the design, please visit this link: https://dl.dropboxusercontent.com/u/211935016/images/original_menu.jpg

Can anybody help me to fix it? Thank you.