I am creating a Joomla blog site with using Joomla for client.
There I am creating a navigation menu with css, that is below :-


div#menu {float:right; margin:28px 45px 0 0; width:600px; height:52px;}
div#menu ul {list-style:none; float:right; padding:0; margin:0;}
div#menu ul li {display:inline; float:left; margin:0; padding:0;}
div#menu ul li a {float:left; text-decoration:none; color:#999999; font-weight:bold; font-size:12px; font-family:Verdana; display:block; padding:12px;}
div#menu ul li a:hover {background: #333333; color:#ffffff;}
div#menu ul li a:active {background: #333333; color:#ffffff;}
div#menu ul li.active a:visited {background: #333333; color:#ffffff;}
div#menu ul li.active a:focus {background: #333333; color:#ffffff;}


Here I am creating hover, active, visited, focus(for chrome).
This css is good working in internet explorer, mozilla, but not working in chrome.

But I could not solve this css problem.
Please help me sir.....

Thanks
Santu

1 answer

1
point

the order of your link pseudo class declarations is wrong...

LoVeHAte is a mnemonic that could help... (or in your case here with Focus, use The "Lord Vader's Former Handle: Anakin" mnemonic )

try:

div#menu ul li.active a:visited {background: #333333; color:#ffffff;}
div#menu ul li.active a:focus {background: #333333; color:#ffffff;}
div#menu ul li a:hover {background: #333333; color:#ffffff;}
div#menu ul li a:active {background: #333333; color:#ffffff;}

but you haven't explained what doesn't work in Chrome, so I may be off the mark!

Answered almost 4 years ago by Tony Crockford
  • +1 For awesome mnemonics. Abinadi Ayerdis over 3 years ago
  • what doesn't work? Where can we see a live example of it not working? Tony Crockford over 3 years ago
  • This is the site link http://www.dataentryhelp.com/ga/gotarblog/ Santu Mondal over 3 years ago
  • Okay, but what is the problem - it all looks okay to me. Tony Crockford over 3 years ago