1

与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。出于某种原因，只有我菜单上的第一个按钮有一个活动类。干杯!

4

2 回答 2

0

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

#main-menu li.active

如果您愿意只选择有子项的菜单链接，请使用.expanded类名。

#main-menu li.expanded

希望这行得通……穆罕默德。

于 2012-07-03T14:09:40.083 回答
0

没有什么比一个活生生的例子更好的了：

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

在此处输入图像描述

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

Drupal 的一个特性是自动将类名添加active到当前选中的li.，因此您可以完全忽略链接示例中的 JavaScript，而直接采用 CSS 中显示的概念。

于 2012-07-30T11:46:29.697 回答