Conflict with a:hover background color

[recce101]

I’ve uploaded some test files illustrating a background color conflict I’m having with the Dropdown Menu CSS Generator (no plugins). Using the generator, I’ve defined these colors for the menu: black (#000000) for top and dropdown normal font colors and top and dropdown hover background colors; pale yellow (#FFFFCC) for top and dropdown normal background colors and top and dropdown hover font colors. I pasted the generator output into the style block of a test file, and the results are correct:

http://wvpress.com/test/test01.html

If I define an anchor link in the sample text below the menu using the default "a" tag styling (nothing added to the style block), the menu is still okay:

http://wvpress.com/test/test02.html

And I can add an "a" selector to the style block to make the link bold, brown, and not underlined without messing up the menu:

http://wvpress.com/test/test03.html

But if I want to give the link a hover background color by adding an "a:hover" selector to the style block, that background color overpowers all of the hover background colors in the menu even though they are all contained under the #suckerfishnav id:

http://wvpress.com/test/test04.html

The only way I’ve found to get around the problem is to define a special class such as "norm" for all of the regular anchor links throughout the site and change the selectors to "a.norm" and "a.norm:hover" in the style block:

http://wvpress.com/test/test05.html

Is there a better way? My attempts to modify the generator output were disastrous, to say the least!

Ned

[imported_Ryan]

I’m not entirely sure what your question is (I’m frantically trying to answer about 100 questions right now, so haven’t read it as well as I could have).

Perhaps try using li:hover and li.sfhover instead of specifying the colours directly on the link.

If you are still confused, or have a specific question you need asked, or I misunderstood what you were asking about then let me know and I’ll revisit this topic.

[recce101]

Ryan, here’s the thread at SitePoint on the same subject. The new test files are linked there (four of them currently). My question is no longer as critical as it was, since the conflict has been resolved. But I’ve continued trying to refine and comment the CSS for use as a template, and it would be great to have your suggestions.

http://www.sitepoint.com/forums/showthr … ost4533026

Example 4, with the fix, is here:

http://wvpress.com/test/test14.html

Thanks,

Ned

[imported_Ryan]

The guys over at SitePoint seem to have answered things for you pretty well already.

That’s actually where I learned to make these things originally ” title=”Smiley” />

[Author]

Posts