CSS仅改变子菜单的背景颜色

时间：2014-03-19 23:00:38

标签： html css colors background

我正在网站上工作 http://healthyeatingandliving.ca/

我面临的问题是，我希望将子菜单样式保持为浅绿色的drowndown背景，并将鼠标悬停，如果页面选择背景为深绿色。目前它似乎是从主菜单继承活动页面的样式。

任何人都有任何关于如何解决它的想法？非常感谢。

3 个答案:

答案 0 :(得分：0)

我只在http://healthyeatingandliving.ca/corporate-wellness/

中发现了这个问题

enter image description here

修复

注释掉以下样式表的第481行到第484行。

http://healthyeatingandliving.ca/site/wp-content/themes/twentyten/style.css

enter image description here

enter image description here

更新以突出显示活动标签

使用以下代码替换#access li.current_page_item > a { ... } - 

#menu-main-menu > li.current_page_item > a {
    background: url(http://healthyeatingandliving.ca/site/wp-content/uploads/2014/03/leavesbig.png) no-repeat 18px 6px !important;
    color: #ffcc00 !important;
}

enter image description here

答案 1 :(得分：0)

违规风格是：

#access li.current_page_item > a

（style.css，第481行）

将此样式更改为：

#access li.current_page_item > a {
background: #39b54a !important;
}

它应该会给你你所追求的东西。

答案 2 :(得分：0)

根据你的描述，希望我没有被误解。 在此页面中，http://healthyeatingandliving.ca/recipes/breakfast/

正在选择“早餐”，子菜单背景显示不正确，将CSS line 481的部分更改为

li.current_page_item > a {
/* 
Commented out portion is what you are using now
background: url(http://healthyeatingandliving.ca/site/wpcontent/uploads/2014/03/leavesbig.png) no-repeat 18px 6px !important; 
*/
background: #39b54a; /* no need to add !important */
color: #ffcc00 !important;
}

我在“Chrome 33.0.1750.154 m”中测试过，应该可以解决您的问题。

需要注意的一点是，尽量避免使用!important，因为过多的覆盖会导致跟踪任何继承问题。

预期结果：

  1. 悬停或选中的子菜单将背景为深绿色
  2. 正常子菜单保持浅绿色

    3. enter image description here

相关问题
最新问题