使用CSS更改活动菜单项的文本颜色

我需要您的帮助，使用CSS更改我网站上活动菜单项的文本颜色。使用CSS更改活动菜单项的文本颜色

（这是一个Joomla网站，我正在修改标准的Gantry框架模板以满足我们的需求）。

下面是活动菜单项的CSS ...

.gf-menu.l1 > li.active { 
     background: none; 
     color: #19D57E; 
     border: none; 
     border-bottom: 3px solid #19D57E; 
     border-radius: 0px; 
     -webkit-box-shadow: none; 
     -moz-box-shadow: none; 
     box-shadow: none; 
     margin: 0 auto; 
     padding-top: 1px; 
    }

这里是被动的菜单项的CSS ...

.gf-menu .item { 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 13px; 
     line-height: 21px; 
     color: #555555; 
     padding: 4px 8px; 
     text-align: left; 
     text-shadow: 0px 0px 0 transparent; 
     text-decoration: none; 
     display: block; 
     outline: 0; 
     cursor: pointer; 
     font-weight: bold; 
    }

我想是的颜色活动菜单项中的文字变为绿色（＃19D57E）。

活动菜单项目已经在底部显示一条绿线，但菜单项目的文本颜色像被动菜单项中一样保持黑色。正如你所看到的，我已经指定了颜色的文字，但由于某种原因，它没有这样做。

我在做什么错？

如果你想看看网站，请到http://www.barrylong.tv/index.php/home

非常感谢！

赫克托

来源

2013-09-28 Hectoritobh

我认为你误解了活动和悬停，使用悬停而不是活动 –

@NishadNichoos这不会起作用，因为'.active'是DOM元素的一个类，此外，悬停意味着鼠标悬停的情况。 –

这是需要的CSS：

.gf-menu.l1 > li.active a { 
     color: #19D57E; 
}

注意a后.active

希望这有助于

来源

2013-09-28 19:46:20 Lodder

嗨Lodder，谢谢。这工作很好。但是，我现在遇到了一个小问题：活动菜单的下拉菜单项与背景颜色相同，因此您无法看到它们。如何保持活动下拉菜单项目的颜色为黑色（＃555555），被动时保持白色，并且保持徘徊状态？ – Hectoritobh

@Hectoritobh - 你可以使用下面的css。不要忘了颜色'.gf-menu .dropdown ul .item {color：＃555555！important; }' – Lodder

非常感谢！这使得菜单项再次变黑（被动时），但是当盘旋时，它们保持黑色。我已经有一些CSS在盘旋时将菜单项变为白色，但看起来您的CSS命令否决了：'.gf-menu li：hover， .gf-menu li.active:hover {border：1px solid＃19D57E;背景：＃19D57E;颜色：#ffffff; padding-top：1px; border-radius：4px;}'你建议我做什么？ – Hectoritobh

在样式表.gf-menu > .active > a { color: #19D57E; }添加此。

来源

2013-09-28 19:47:15

我认为你必须改变.active li元素中.item元素的颜色。目前你正在尝试改变li元素的颜色而不是链接的颜色。

.gf-menu.l1 > li.active .item { 
    /* ... */ 
    color: #19D57E; 
    /* ... */ 
}

来源

2013-09-28 19:47:23

找到CSS块：在您的源item101 active last

通告 “家”：

<li class="item101 active last"> 

<a class="item" href="/index.php/home">Home </a> </li>

你会看到文本的颜色属性来更改。你所做的不工作的原因是你正在改变错误的CSS块属性。

来源

2013-09-28 19:49:36 OBV

使用CSS更改活动菜单项的文本颜色

回答

相关问题