I'm having some trouble with unordered lists in my menu
www.sillybomb.com is the site.
The problem is in safari the links work perfectly fine. You hover over each one and the writing turns white with a shadow.
The problem occurs in firefox however and I haven't tested IE but I'll assume it happens there too.
when I add the <a> tags around the link the link will only work on the text and checkbox image but the hover area of the <li>. The text stays black instead of turning white as it should. again this works in safari, but in firefox anything with the <a> tag ONLY works for the characters and not the whole area.
without the <a> tags the entire thing works but obviously then theres no link supplied for people to go through.
any help would be appreciated!
www.sillybomb.com is the site.
The problem is in safari the links work perfectly fine. You hover over each one and the writing turns white with a shadow.
The problem occurs in firefox however and I haven't tested IE but I'll assume it happens there too.
when I add the <a> tags around the link the link will only work on the text and checkbox image but the hover area of the <li>. The text stays black instead of turning white as it should. again this works in safari, but in firefox anything with the <a> tag ONLY works for the characters and not the whole area.
without the <a> tags the entire thing works but obviously then theres no link supplied for people to go through.
any help would be appreciated!
Code:
a.menl:link{color:#000; text-decoration:none; border:none; border-width:0; border-style:none;}
a.menl:visited{color:#000; text-decoration:none; border:none; border-width:0; border-style:none;}
a.menl:hover{color:#FFF; text-decoration:none; border:none; border-width:0; border-style:none;}
a.menl:active{color:#FFF; text-decoration:none; border:none; border-width:0; border-style:none;}
ul.menu{
float:left;
margin-top:20px;
margin-left:-40px;
list-style-type:none;
font-size:14px;
text-decoration:none;
width:179px;
}
li.menu{
padding-left:10px;
padding-bottom:2px;
background-image:url(/framework/leftbarHover.jpg);
background-position:-179px 0px;
color:#000;
}
li.menu:hover{
background-position:0px 0px;
cursor:pointer;
text-shadow:#000 2px 2px 2px;
color:#FFF;