galahad3

Hi,

I'm trying to set up my (very basic, horizontal, no dropdown) CSS menu so that when a user hovers over the menu link items, the formatting changes and they basically get an image on mouseover (nothing more than changing the text colour and adding a curve on the left hand side, so it just looks like a selected tab).

It kind of works but instead of the whole image showing it only shows in the area where the menu link text is, so instead of covering the height of the menu bar and a length I specify, it's just covering the actual word e.g "Home" in each case on the menu.

I can't seem to get it so that on rollover the whole image shows. I've tried setting it so that the links have a background image (just a plain block from the nav bar) but that doesn't work.

My CSS is:

/* this is the bar where the menu is located */
.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

/*holder for the menu */
div.navigation {
margin-left:30px;
padding-top:10px;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
display: block;
padding: 0px 20px 0px 10px;
display: inline;
height:2.19em;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
}

.navigation ul li a:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
}

I've tried setting display:block; and float:left; on the .navigation ul li, but this makes the menu become vertical and throws the whole page out of sync.

I tried this altrnative code, to no avail:

.menuholder {
width:1001px;
height:2.19em;
background-color:#0f2763;
}

div.navigation {
margin-left:30px;
padding-top:10px;
height:2.19em;

}
.navigation ul {
list-style-type: none;
position: relative;
float: left;
}

.navigation ul li {
padding: 0px 20px 0px 10px;
display: block;
float:left;
height:2.19em;
}

.navigation ul li:hover {
color:#0f2763;
background-image:url(/images/menutab.gif); width:100px; height:2.19em;
background-repeat:no-repeat;
}

.navigation ul li a {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
display: inline;
}

Any ideas or pointers gratefully received!

colmustard

that is some extremely messy css man,

I wasn't really sure what you were going for with the way you wrote this, but I think I got the job done.
(if this doesn't work then private message me and we can talk on aim or something to get this fixed)


/* this is the bar where the menu is located */
#menuholder {
position: relative;
width:1001px;
height:2.19em;
background-color:#0f2763;
}

#menuholder div.navigation {
margin-left:30px;
padding-top:10px;
}

#menuholder div.navigation ul {
list-style-type: none;
margin: 0;
}

#menuholder div.navigation li {
position: relative;
float: left;
display: block;
padding: 0px 20px 0px 10px;
height:2.19em;
}

#menuholder div.navigation a {
position: absolute;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
font-size:14px;
font-weight:bold;
line-height:18px;
width:100px;
height:2.19em;
text-decoration:none;
}

#menuholder div.navigation a:hover {
color:#0f2763;
background:url(/images/menutab.gif) no-repeat;
}


the html will look like this:

<div id="menuholder">
<div class="navigation">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
</ul>
</div>
</div>

galahad3

Thanks for the reply, think I have it sorted now though, by tweaking the padding...

Have a different issue now with the image not showing entirely for the list items that have less characters (e.g Home) however that's a separate issue I guess.

Thank you

colmustard

Hi Galad,

Well if the entire image isn't showing then this is a css issue as well, but I need to see exactly how you set up your menu navigation bar in terms of the html in order to fix it without breaking anything else.

galahad3

Managed to crack it, by ditching the menu system I was using and redoing it so it looked the same but with multiple li classes which works perfectly...

colmustard

Ahhh, gratz then, and best of luck with the site