Hi All, I have been working on my works site. I set-up a one page site with local scroll and am in the process of breaking the site up into multiple pages. I’m running into an issue with my menu.
Basically I have local scrollto links such as “#about” and links to external pages in the menu. The links are white and yellow on mouse over. My external links seem to have an issue where when you hover they turn yellow but only for a second before it changes back to white. The local scroll links work as expected. Any ideas? let me know what I need to provide you guys to figure this out.
I didn’t see the problem at first, then clicked through a couple of pages. On the “Products” page, the issue occurred, affecting the “Home” and “Blog” links. When I returned to the “Home” page, then the “Products” and “Blog” links were affected.
I didn’t have time to look closely, but I’m guessing your visited styles are over-riding your hover styles.
So look at this rule “.mainnav .menu a{}”. That sets the color for all anchors that meet that description. Along with all pseudo classes. That means that it sets the :hover pseudo class as well.
However your hover rules are set like this “.mainnav a:hover{}.”
Due to specificity, your hover rules aren’t enough to override your “.mainnav .menu a{}” rule. You need to change your hover to match that specificity. E.g. .mainnav .menu a:hover{}.
.