Here is a snippet of my custom CSS styling:
#languages_menu
{
background: url('/images/langs.png') repeat-y;
bottom: 40px;
font-size: 0.9em;
right: 10px;
position: absolute;
width: 90px;
}
#languages_menu ul, #languages_menu ul li
{
list-style: none;
}
#languages_menu ul li a
{
cursor: pointer;
display: block;
line-height: 22px;
margin-left: 10px;
text-decoration: none;
width: 80px;
}
#languages_menu ul li a:hover
{
background-color: #AEBDD2;
color: #F00;
}
#languages_menu ul li a span.flag
{
float: left;
margin: 3px 5px 0 3px;
}
Below is the HTML code I used (taken from Developer Toolbar for accuracy):
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" -->
...
<DIV id=languages_menu><DIV class=topimg></DIV>
<DIV>
<UL>
<LI><A class=en><SPAN class=flag></SPAN><SPAN class=name>English</SPAN></A></LI>
<LI><A class=fr><SPAN class=flag></SPAN><SPAN class=name>Français</SPAN></A></LI>
...
</UL>
</DIV>
</DIV>
:hover functionality in IE7 or earlier versions seems to be causing some trouble with the anchor elements not changing on mouse hover.
Interestingly, other similar code snippets on the same page are functioning as expected even in IE7, like this one:
#navigation
{
height: 22px;
position: relative;
width: 100%;
}
#navigation ul
{
float: left;
left: 50%;
}
#navigation ul, #navigation ul li
{
float: left;
list-style: none;
position: relative;
}
#navigation ul li
{
right: 50%;
}
#navigation ul li a
{
color: #889DBF;
display: block;
line-height: 22px;
padding-left: 20px;
text-decoration: none;
}
#navigation ul li a b
{
display: block;
padding-right: 21px;
}
#navigation ul li.current a, #navigation ul li a:hover
{
background: url('/images/navigation-left.png') no-repeat;
color: #111B35;
}
#navigation ul li.current a b, #navigation ul li a:hover b
{
background: url('/images/navigation-right.png') no-repeat 100% 0;
color: #111B35;
}
<DIV id=navigation>
<UL>
<LI class=current><A href="#login"><B id=text_menu_login>Accedi</B></A></LI>
<LI><A href="#register"><B id=text_menu_register>Registrati</B></A></LI>
...
</UL>
</DIV>
If anyone has insight into why this issue is occurring and how it can be resolved, please share!
[EDIT] A workaround solution has been discovered: Replacing:
#languages_menu ul li a:hover
With:
#languages_menu ul li:hover a
This adjustment allows the menu to function correctly even in older versions of IE. However, using the :hover pseudo-class may not assure perfect cross-browser compatibility as it's not supported in IE versions below 7.
Thanks a lot, Eric, for your help!