Создание кнопки меню при активном в Drupal 7

Question

Как и для http://www.austintexas.gov/government Я хочу сделать кнопку меню больше, когда она активна.

Вот мой CSS для моего главного меню

#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> 

Вот скриншот

Вещи, которые я пробовал

Я уже пробовал использовать: active и: current. По какой-то причине только первая кнопка в моем меню содержит активный класс. Ура!

Answer 1

Нет ничего лучше, чем живой пример:

http://jsfiddle.net/g105b/76JDZ/

В примере используется JavaScript, чтобы добавить active класс к выбранному li элементу, но эффект, который вы ищете чисто CSS.

Особенностью Drupal является автоматическое добавление имени класса active к выбранному в данный момент li, поэтому вы можете полностью игнорировать JavaScript в связанном примере и просто взять концепцию, показанную в CSS.

Answer 2

Используйте .active класс имя. Все активные ссылки меню в Drupal имеют имя класса active.

#main-menu li.active 

Если вы готовы выбрать только меню ссылки, которые имеют детей, использовать .expanded имя класса.

#main-menu li.expanded 

Надеюсь, что это работает ... Мухаммад.