Problems with CSS Rollovers help?

[Sizzle]

I am trying to create rollovers with CSS, and I am running into problems. Here's an example of the type of rollover I am trying to code

<snip>

Here's my code:

<div id="subnav">

<ul
class="sublevel"
>
<li class="current"><span id="nav-1-line"><a href="index.html" title=""><span>home</span></a></span></li>

<li id="nav-2"><span class="about"><a href="about.html" title=""><span>Who are we?</span></a></span></li>
<li id="nav-3"><span class="help"><a href="help.html" title=""><span>Find Help</span></a></span></li>
<li id="nav-4"><span class="contact"><a href="contact.html" title=""><span>Contact Us</span></a></span></li>
</ul>

</div>

My CSS code is not working properly. Is there anyway to make it work?

[edited by: swa66 at 10:50 pm (utc) on Oct. 30, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]

[lavazza]

Hi Sizzle and welcome!

Please note that the link you posted will be removed as it contravenes the ToS

My CSS code is not working properly. Is there anyway to make it work?

As you have NOT posted your CSS, its impossible to know

You might find it worthwhile to read some of the threads dealing with the Link, Visited, Hover and Active pseudoclasses

See Google Results 1 - 34 of 34 from webmasterworld.com for css LoVe HAte pseudoclass [google.com]

[Sizzle]

This is an example of my code:

#subnav {
background : url(../navbg.jpg) no-repeat;
width : 380px;
height : 35px;
top : 0;
padding : 9px;
float: right;
}
#subnav span {
display : inline;
}
#subnav li, #subnav a {
height : 129px;
display : inline;
}
#subnav li {
float : right;
list-style : none;
display : inline;
}
#current {
width : 66px;
}
#about {
width : 97px;
}
#contact {
width : 66px;
}

#current a:hover {
background: url(../navbg.jpg) no-repeat 0 -129px;
}
#about a:hover {
background : url(../navbg.jpg) no-repeat -466px -129px;
}
#help a:hover {
background :url(../navbg.jpg) no-repeat -563px -129px;
}
#contact a:hover {
background : url(../navbg.jpg) no-repeat -679px -129px;
}

[Sizzle]

Updated version:

CSS

#nav{ float: right; width: 706px; height: 47px; background: url(../nav.jpg) no-repeat; position: relative; top: 14px; }
#nav span{ display: none; }
#nav li, #nav a{ height:53px; display:block; }
#nav li{ float:left; list-style:none; display:inline; margin: 0; }

#nav-01{ width: 103px; }
#nav-02{ width: 160px; }
#nav-03{ width: 90px; }

#nav-01 a:hover{ background: url(../nav.jpg) -12px -30px no-repeat; }
#nav-02 a:hover{ background: url(../nav.jpg) -130px -51px no-repeat; }
#nav-03 a:hover{ background: url(../nav.jpg) -10px -51px no-repeat; }
#nav-04 a:hover{ background: url(../nav.jpg) -321px -51px no-repeat; }
#nav-05 a:hover{ background: url(../nav.jpg) -489px -51px no-repeat; }
#nav-06 a:hover{ background: url(../nav.jpg) -612px -51px no-repeat; }

#nav-01 a.active{ background: url(../nav.jpg) -0px -102px no-repeat; }
#nav-02 a.active{ background: url(../nav.jpg) -160px -102px no-repeat; }
#nav-03 a.active{ background: url(../nav.jpg) -175px -102px no-repeat; }
#nav-04 a.active{ background: url(../nav.jpg) -321px -102px no-repeat; }
#nav-05 a.active{ background: url(../nav.jpg) -489px -102px no-repeat; }
#nav-06 a.active{ background: url(../nav.jpg) -612px -102px no-repeat; }