Making a menu button larger when active in Drupal 7 - css

Question

Similar to http://www.austintexas.gov/government I want to make a menu button bigger when it is active.
Here is my css for my main menu
#mobileMenu_mm1 {
margin: 10px 20px;
padding: 3px 0px;}
#navigation {
margin: 0px auto;
float: left;}
#main-menu{
clear: both;
float: left;
color: #fff;
font-size: 18px;
margin: 0px auto;
overflow: hidden;
width: 100%;}
#main-menu ul {
float: left;
margin-top: 10px;
margin-left: 20px;
padding: 0px 15px;}
#main-menu li {
float: left;
list-style-type: none;
font-weight: 400;
color: #333 !important;
background: rgb(0, 25, 60);
background: rgba(0, 25, 60, 0.9);}
#main-menu li a {
color: #777;
display: block;
padding: 7px 7px 7px 7px;
text-decoration: none;
line-height: 12px;}
/*----------------------MENU SPECIFIC COLORS--------------*/
#main-menu li#dhtml_menu-305{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: #D1B37F;
}
#main-menu li#dhtml_menu-50692{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: #ffff90;
}
#main-menu li#dhtml_menu-50690{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: lightblue;
}
#main-menu li#dhtml_menu-50207{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: #CAC37F;
}
#main-menu li#dhtml_menu-50207 li{
background: #CAC37F;
}
#main-menu li#dhtml_menu-50691{
border-radius: 15px 15px 0px 0px;
background: #E4B04A;
}
#main-menu li a:hover {
border-radius: 15px 15px 0px 0px;
background: rgb(200, 200, 200);
background: rgba(200, 200, 200, 0.7);
height: 35px;}
#main-menu li a .sf-sub-indicator {
display: block;
overflow: hidden;
position: absolute;
z-index: 15;
text-indent: -9999px;}
#main-menu li ul li a,
#main-menu li ul li a:link,
#main-menu li ul li a:visited {
border-top-width: 0;
color: #fff;
font-size: 14px;
padding: 10px 10px;
text-transform: none;
line-height: 13px;
width: 105px;}
#main-menu li ul {
height: auto;
padding: 0px 0px;
left: -9999px;
margin: 0 0 0 -2px;
position: absolute;
z-index: 15;
width: 0px;}
#main-menu li ul a {width: 110px;}
#main-menu li ul ul {margin: -33px 0 0 124px;}
#main-menu li:hover>ul,
#main-menu li.sfHover ul {left: auto;}
#main-menu ul li.leaf, #main-menu ul li.expanded, #main-menu ul li.collapsed {list-style:none;}
#main-menu ul.menu li {margin: 0;}
#main-menu li.expanded, #main-menu li.collapsed, #main-menu li.leaf {margin: 0;padding: 0;}
HTML/PHP
<nav id="navigation" role="navigation">
<div id="main-menu">
<?php
$main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
print drupal_render($main_menu_tree);
?>
</div>
</nav><!-- end main-menu -->
<?php if ($page['header']): ?>
<div id="header" class="sixteen columns" style="margin: 0; padding: 0;>
<?php print render($page['header']); ?>
</div>
<?php endif; ?>
</div>
</div>
</header>
Here is a screenshot
Things I've Tried
I have already tried using :active and :current. For some reason only the first button on my menu has an active class given to it. Cheers!

Answer 1

Nothing is better than a live example:
http://jsfiddle.net/g105b/76JDZ/
The example uses JavaScript to add the active class to the currently selected li element, but the effect you are looking for is purely CSS.
A feature of Drupal is to automatically add the class name active to the currently selected li, so you can completely ignore the JavaScript in the linked example, and simply take the concept shown in CSS.

Answer 2

Use .active class name. All active menu links in Drupal has a class name active.
#main-menu li.active
If you are willing to select only the menu links that have children, use .expanded class name.
#main-menu li.expanded
Hope this works... Muhammad.