Trying to use images on hover in Wayfinder menu

Hi,

I’m trying to set up my (very basic, horizontal, no dropdown) Wayfinder-based 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;
}

Any ideas or pointers gratefully received!

I think there’s two possible options:

The First:
.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: block;
}

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


The second one might also need
.navigation ul li:hover a {
color:#0f2763;
}
to also change the link color when hovering the contain <li>

If you want to make the entire <li> clickable, you should give an id to the <a> and use an onClick.
For example:
<li onClick="document.getElementById("randomId").click();"><a href="page.php" id="randomId">text</a></li>

Tried the first one, i.e adding display:block; - which caused it to become a vertical menu and also knocked my existing positional divs everywhere (.eg middle content jumped down a row etc.). (although interestingly each menu item did show the correct full image on mouseover)

So I tried display:inline; which restored it to horizontal menu, however with the original problem intact.

I tried the second one, changing the code as follows:

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

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

But although this ahs slightly increased the portion of the image that can be seen, it’s still pretty much the same as before... any ideas why?

Slight error, removed the display:block; from the code above, but still the same.

If you use display: block it will cause the elements to display one above the other; you can solve this by also floating them within their container.


The problem is that with display: inline you don’t get block-level styling, such as padding and margins. You might try display: inline-block, although (of course) IE 6 and 7 may or may not recognize it properly. IE 8 supposedly does.

http://www.quirksmode.org/css/display.html

As I read about the items ending up underneath each other, the first thing I thought was: float.
So, yes... Adding float: left; to it should work. Although you might have to set a height for the containing div as well.
Assuming you give the class navigation to a div, that would make it
.navigation {
height: 3.89em;
}

Hmm, unfortunately adding the float:left etc. has (more or less) made the image appear on rollover, it’s had the effect of moving the main content divs for the page down a row, i.e thrown everything out of place as if it was a vertical menu i.e display:block.

The code I’m now using is:

.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;
}

Could you add the source of your page?
That might make it easier to find the solution.