I want to create a vertical navigation menu using CSS sprite. I have attached a thumbnail of the image that I designed in illustrator which I need to work for(i woul). Previously I found it very easy to code a horizontal menu using sprites.But i just could'nt figure out how a vertical one would work. I have attached the code of horizontal menu here , do help me how this code would change for a vertical menu.

 

 

HTML OF HORIZONTAL CSS SPRITE:

<div id="nav">

<ul id="menu">

<li><a href="newindex.html" class="home">home</a></li>

<li><a href="gallery.html" class="gallery">gallery</a></li>

<li><a href="menu.html" class="menu">menu</a></li>

<li><a href="location.html" class="location">location</a></li>

<li><a href="blog.html" class="blog">blog</a></li>

</ul>

</div>

 

CSS:

 

 

ul#menu{

width:980x;

list-style:none;

float:left;

margin:0 0 0 0; /*position the nav bar*/

}

ul#menu li { display: inline; }

ul#menu li a {

display:block;

height:76px;

float:left;

background-image: url('images/nav2.png'); text-indent: -9999px;

}

ul#menu li a.home {

width: 173px; background-position: 0 0;

}

ul#menu li a.gallery{

width: 210px; background-position: -173px 0;

}

ul#menu li a.menu {

width: 231px; background-position: -383px 0;

}

ul#menu li a.location {

width: 223px; background-position: -614px 0;

}

ul#menu li a.blog{

width: 143px; background-position: -837px 0;

}

ul#menu li a.home:hover, ul#menu li a.home:focus {

background-position: 0 -76px;

}

 

ul#menu li a.gallery:hover, ul#menu li a.gallery:focus {

background-position: -173px -76px;

}

ul#menu li a.menu:hover, ul#menu li a.menu:focus {

background-position: -383px -76px;

}

 

ul#menu li a.location:hover, ul#menu li a.location:focus {

background-position: -614px -76px;

}

 

ul#menu li a.blog:hover, ul#menu li a.blog:focus {

background-position: -837px -76px;

}

Edited September 4, 201115 yr by diva

I can't see your thumbnail

here's the thumbnail

here's the thumbnail

 

So when you hover over one of the links you want the ENTIRE menu to change to the brown version?

(or visa versa?)

 

Or am I missing something?

So when you hover over one of the links you want the ENTIRE menu to change to the brown version?

(or visa versa?)

 

Or am I missing something?

 

Yes when i hover i want the particular text part to turn into brown

Sorry but I'm not quite sure what your trying to do here...

In your HTML and CSS you are referencing 5 different links (location, home, gallery, blog and menu) but there are only 3 instances of text on your sprite.