Visited link property overrides current page item

3 Views

Im coding for quite a while but it seems i never got this problem before, or i just forget the tweak, so anoying:)

I have a wordpress site set up, the menu links are a:(textual)

Read More

the css defined(part): 

link (color:white;)
visited (color:white;)
hover (color:black;)
active (color:black)

now the problem is, i defined

current-menu-item

in wordpress, everything seams to change except the font color…
it seems “visited” is overriding the color…
how to fix this?

css: 

#pages ul li { float: right; display: block; height: 37px; padding: 0px; }
        #pages ul li a:link { float: left; color: #FFF; display: block; height: 29px; font-size: 11px; padding: 7px 20px 0px 20px; margin: 0px; }

#pages ul li a:visited {float: left; color:#fff; display: block; height: 29px; font-size: 11px; padding: 7px 20px 0px 20px; margin: 0px;}

#pages ul li a:hover { background-position: top; background-repeat: no-repeat; margin: 0px; color: black;}
#pages ul li a:active {background-position: top; background-repeat: no-repeat; margin: 0px; color: black;}
.current-menu-item a:link, .current-post-ancestor a:link, .current-menu-parent a:link, .current-post-parent a:link {background-position: top; background-repeat: no-repeat; margin: 0px; color:black; }
Post Views: 3

Related posts

Leave a Reply

2 comments

  1. css hierarchy

    your selectors are only 2 levels deep .current-menu-item a:link, .current-post-ancestor a:link, .current-menu-parent a:link, .current-post-parent a:link

    wordpress selectors are 4 levels deep #pages ul li a:visited, and also it has an ID which makes it weight more than your css rule.

    try adding an id and selectors on your css rule to be read by the browser and overwrite WP’s css rule.

  2. Make sure your menu css is loaded after the css file that sets the styles for link, visited, hover etc.

    Or if the previous is not possible make the current-menu-item style’s color property !important:

    .current-menu-item {
    color: #000 !important;
}