Hey everyone,
I’m trying to make a menu using css image sprites, however i’ve encountered a problem.
Here’s the URL: http://www.avn8.com/222.html
[img]http://www.avn8.com/superblue.png[/img]
This is the image for the menu.
This is what i’ve done so far:
<html>
<head>
<style type="text/css">
#superblue{position:relative; }
#superblue li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#superblue li, #superblue a{height:100px;display:block;}
#home{left:0px;width:160px;}
#home{background:url(‘superblue.png’) 0 0;}
#home a:hover{background: url(‘superblue.png’) 0 -100px;}
#folio{left:160px;width:160px;}
#folio{background:url(‘superblue.png’) -160px 0;}
#folio a:hover{background: url(‘superblue.png’) -160px -100px;}
#blog{left:351px;width:160px;}
#blog{background:url(‘superblue.png’) -351px 0;}
#blog a:hover{background: url(‘superblue.png’) -351px -100px;}
#news{left:483px;width:160px;}
#news{background:url(‘superblue.png’) -483px 0;}
#news a:hover{background: url(‘superblue.png’) -483px -100px;}
#contact{left:630px;width:160px;}
#contact{background:url(‘superblue.png’) -630px 0;}
#contact a:hover{background: url(‘superblue.png’) -630px -100px;}
</style>
</head>
<body>
<ul id="superblue">
<li id="home"><a href="#"></a></li>
<li id="folio"><a href="#"></a></li>
<li id="blog"><a href="#"></a></li>
<li id="news"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li>
</ul>
</body>
</html>
Please, can someone tell me, how to solve this issue.
Thanks a bunch,
Arjun
