Forum Moderators: not2easy
I'm using this CSS code:
.menu li {
list-style:none;
display:block;
padding:3px;
margin-bottom:3px;
}
.menu li a{
font-weight:bold;
text-decoration:none;
}
.menu li a:hover {
text-decoration:overline;font-style:italic;
}
however I can't get the underline-effect for the links to dissappear when the cursor is above them (which I'm trying to do with ...a:hover {text-decoration:none;}). How come this isn't working?
Additional information:
The underline effect is gone when I'm not moving over it with the mouse cursor & using something such as text-decoration:overline doesn't show any effects, either...
I'll appreciate any suggestions! thanks!
[edited by: SuzyUK at 11:22 am (utc) on Mar. 10, 2008]
[edit reason] disabled smileys for code [/edit]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"/>
<html>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = ISO-8859-1'>
<meta http-equiv = 'Content-Language' content = 'en'>
<meta http-equiv = 'Content-Script-Type' content = 'text/javascript'>
<meta http-equiv = 'Content-Style-Type' content = 'text/css'>
<meta http-equiv = 'Expires' content = 'Thu, 01 Jan 1970 00:00:00 GMT'>
<meta http-equiv = 'Pragma' content = 'no-cache'>
<meta http-equiv = 'Cache-Control' content = 'no-cache'>
<style>
.menu li {list-style:none;display:block;padding:3px;margin-bottom:3px;}
.menu li a{font-weight:bold;text-decoration:none;}
.menu li a:hover {text-decoration:overline;font-style:italic;}
</style>
</head>
<body>
<div class='menu'>
<ul>
<li><a href='#'>this</a> is a link.</li>
<li><a href='#'>this</a> is a link.</li>
<li><a href='#'>this</a> is a link.</li>
</ul>
</div>
</body>
</html>
[edited by: SuzyUK at 11:24 am (utc) on Mar. 10, 2008]
[edit reason] removed smileys from code [/edit]
CSS Validator
[jigsaw.w3.org...]
@pageoneresults: I'll give your suggestions a try, too (trying to validate my CSS..I don't think there was any overriding effect, though (checked that already)).