Help with nave block

[Casey]

It looks like this:

I want it looking like this:

HTML:

services

photos











blogs

videos

poems

portfolio

And the CSS:

/*  Nav image set Menu Bar */



.menu-bar {

padding-left: 10px;

padding-top: 50px;}



/* Shiba Inus */

#pups

{	display: block; width: 150px;	height: 31px;

background: url('images/Shibainusprite.png') no-repeat 0 0; }

#pups:hover

{   background-position: 0 -31px; }

#pup span

{  position: absolute;  top: -9999em; }



/*Services*/

#service

{	display: block;

width: 151px;

height: 54px;

background: url('images/servicesprite.png') no-repeat 0 0; }

#service:hover

{   background-position: 0 -54px; }

#service span

{   position: absolute;  top: -999em; }



/*Photos*/

#photo

{

display: block;

width: 151px;

height: 47px;

background: url('images/photosprite.png') no-repeat 0 0;  }

#photo:hover

{   background-position: 0 -47px; }

#photo span

{  position: absolute;

top: -999em;



/*Home*/

}#home

{	display: block;

width: 151px;

height: 43px;

background: url('images/homesprite.png') no-repeat 0 0;	}

#home:hover

{   background-position: 0 -43px;}

#home span

{ position: absolute;

top: -999em;}



/*  Nav image set Extra Bar */



.bar2 {	padding-left: 100px; padding-top: 10px;}



/*Blogging rollover */

#blog

{

display: block;

width: 150px;

height: 31px;

background: url('images/blogsprite.png') no-repeat 0 0;

}

#blog:hover

{   background-position: 0 -31px; }

#blog span

{  position: absolute;  top: -999em;}



/* Video link */

#video

{	display: block;

width: 150px;

height: 54px;

background: url('images/videosprite.png') no-repeat 0 0; }

#video:hover

{   background-position: 0 -54px;}

#video span

{  position: absolute;

top: -999em;}



/* Poems Rollover */

#poem

{	display: block;

width: 150px;

height: 46px;

background: url('images/poems.png') no-repeat 0 0; }

#poem:hover

{   background-position: 0 -46px; }

#poem span

{ position: absolute;

top: -999em;}



/*Portfolio*/

#portfolio

{	display: block;

width: 150px;

height: 43px;

background: url('images/portfoliosprite.png') no-repeat 0 0; }

#portfolio:hover

{   background-position: 0 -43px;}

#portfolio span

{  position: absolute;  top: -999em;}

Help please.. I am such a newb at this.

[jamygolden]

http://jsfiddle.net/jamygolden/6xy2K/

[Casey]

not exactly working with images.. :-( maybe I can try to implement what you did to work it out.. ty so far.

[jamygolden]

I can’t open jsfiddle for some reason. But it does work with images. Just give the li’s a width and height.

[Casey]

I got it working with your code.. thanks very much. It took a lot of tweaking. LOL

[Author]

Posts