在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

使用.active班级名称。 Drupal中的所有活动菜单链接都有一个类名active。

#main-menu li.active

如果您只想选择有孩子的菜单链接，请使用.expanded班级名称。

#main-menu li.expanded

希望这有效......穆罕默德。

Answer 2

没有什么比现场例子更好：

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

该示例使用JavaScript将active类添加到当前选定的li元素，但您要查找的效果纯粹是CSS。

Drupal的一个功能是自动将类名active添加到当前选定的li，因此您可以完全忽略链接示例中的JavaScript，并简单地采用CSS中显示的概念。