Sprite Navigation Issue

[ArtyMcFarty]

I am having a little trouble with a CSS menu and was wondering if anyone could help. First I am going to show you an image of what I am trying to achieve. I wish to have the links centered on the overall menu bar. I also want the text in the individual link “boxes” centered as well, no matter how long the text is. Right now I have it kind of centered using padding, but only the shorter words look centered. (I figured this one out :p)

The major issue I am having is the hover property. The submenu is almost perfect, but the image sprite is not displaying correctly.

A minor issue is the extra gap or pixel line in between the images. I tried changing the width by 1 pixel which worked for the inside link images, but cut off the edge pixel line of the end cap links.

I hope my issues made sense. I am not a css expert so the more simple the code the better. :)

Thanks for reading.

Ideal menu:
http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/MenuPreview.png

Current Menu:
http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/MenuPreviewIncorrect.png

CSS Code:

#cssmenu ul {

margin: 0;

padding: 0;

text-align:center;

}



#cssmenu li {

margin: 0;

padding: 0;

text-align:center;

}



#cssmenu a {

margin: 0;

padding: 0;

}

#cssmenu ul {

list-style: none;

}

#cssmenu a {

text-decoration: none;

}



#cssmenu {

margin: 0;

padding: 0;

height: 89px;

background:url(http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/enubarline.gif)}





#cssmenu > ul > li {

border:none;

float: left;

margin: 0px;

position: relative;

width: 160px;

background-position: 0 89px;

background:url(http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/menubutton-1.png) no-repeat;

}



#cssmenu > ul > li > a {

border:none;

color:#e6a446;

font-family: Verdana, 'Lucida Grande';

font-size: 16px;

font-weight:bold;

line-height: 89px;

text-shadow: 2px 2px 2px #000000;

padding: 0px;

margin: 0px;

}



#cssmenu > ul > li > a:hover {

text-decoration:none;

background:url(http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/menubutton-1.png) no-repeat;

background-position: 0 -89px;

}





#cssmenu > ul > li > ul {

opacity: 0;

visibility: hidden;

padding: 0px 0px 0px 0px;

background-color: #170429;

text-align: left;

position: absolute;

top: 90px;

left: auto;

margin-left: 0px;

width: 160px;

}



#cssmenu > ul > li:hover > ul {

opacity: 1;

top: 89px;

visibility: visible;

}



#cssmenu > ul > li > ul:before{

content: '';

display: block;

border:none;

position: absolute;

top: -20px;

left: 50%;

margin-left: -10px;

}



#cssmenu > ul ul > li { position: relative;}



#cssmenu ul ul a{

color: #e6a446;

font-family: Verdana, 'Lucida Grande';

font-size: 14px;

background-color: #170429;

padding: 13px 0px 15px 0px;

display: block;

}



#cssmenu ul ul a:hover {

background-color: #2f0053;}





#cssmenu ul ul ul {

position: absolute;

top: -16px;

left: 206px;

padding: 16px 0 20px 0;

background-color: #2f0053;

text-align: left;

width: 160px;



}





#cssmenu ul ul > li:hover > ul {

left: 160px;

visibility: visible;}





#cssmenu ul ul a:hover{

background-color: #2f0053);

color: #e6a446;

}

HTML Code:

Home


About



Test


Another test link


:D


Hayo!




Gallery



Meister's Collection


Concepts


Workshop


Portfolio






Contact



FAQ


Manuals

[JosiahB]

try this for the css code …

#cssmenu ul {

margin: 0;

padding: 0;

text-align:center;

}



#cssmenu li {

margin: 0;

padding: 0;

text-align:center;

}



#cssmenu a {

margin: 0;

padding: 0;

}

#cssmenu ul {

list-style: none;

}

#cssmenu a {

text-decoration: none;

}



#cssmenu {

margin: 0;

padding: 0;

height: 89px;

background:url(http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/enubarline.gif)}



#cssmenu > ul > li {

border:none;

float: left;

margin: 0px;

position: relative;

width: 160px;

background-position: 0 89px;

background:url(http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/menubutton-1.png) no-repeat;

}



#cssmenu > ul > li:hover {

border:none;

float: left;

margin: 0px;

position: relative;

width: 160px;

background:url(http://img.photobucket.com/albums/v511/RPGStatsPics/BJD/menubutton-1.png) no-repeat;

background-position: 0 -89px;

}



#cssmenu > ul > li > a {

border:none;

color:#e6a446;

font-family: Verdana, 'Lucida Grande';

font-size: 16px;

font-weight:bold;

line-height: 89px;

text-shadow: 2px 2px 2px #000000;

padding: 0px;

margin: 0px;

}



#cssmenu > ul > li > a:hover {

text-decoration:none;



}



#cssmenu > ul > li > ul {

opacity: 0;

visibility: hidden;

padding: 0px 0px 0px 0px;

background-color: #170429;

text-align: left;

position: absolute;

top: 90px;

left: auto;

margin-left: 0px;

width: 160px;

}



#cssmenu > ul > li:hover > ul {

opacity: 1;

top: 89px;

visibility: visible;

}



#cssmenu > ul > li > ul:before{

content: '';

display: block;

border:none;

position: absolute;

top: -20px;

left: 50%;

margin-left: -10px;

}



#cssmenu > ul ul > li { position: relative;}



#cssmenu ul ul a{

color: #e6a446;

font-family: Verdana, 'Lucida Grande';

font-size: 14px;

background-color: #170429;

padding: 13px 0px 15px 0px;

display: block;

}



#cssmenu ul ul a:hover {

background-color: #2f0053;}



#cssmenu ul ul ul {

position: absolute;

top: -16px;

left: 206px;

padding: 16px 0 20px 0;

background-color: #2f0053;

text-align: left;

width: 160px;



}



#cssmenu ul ul > li:hover > ul {

left: 160px;

visibility: visible;}



#cssmenu ul ul a:hover{

background-color: #2f0053);

color: #e6a446;

}

[ArtyMcFarty]

Yay! You got it to work correctly. Thank you.

[Author]

Posts