achieving inline style on hover?

I realise that cssmw cannot have a different image background for each <li>element, and so I would usually apply an inline style with cssmw to achieve this
my client would like to have a menu which has an image which pops up on rollover, something like on the following site.

www.pizzaza.ca

I was hoping to start off with cssmw, but realised that it is only on the li:hover where I want the image to appear, and as a pseudoclass, I don’t think I can achieve this with an inline style.

Has anyone tackled something like this before, or have any ideas/suggestions ?

edit the menu LI tags to give them individual ID's

then you can create unique styles for each ID:


li#idName a:hover { <styles go here> }

that's great, thanks Jason, I'll make a start tomorrow

thanks for your help Jason.

I tried creating a simple menu in css menuwriter and coding the css as you suggested, and have made progress.

The menu will look fine if I want the images to appear below the menu on rollover, but I can't get the menu to appear as i want if the images are to appear above it.

i tried assigning a negative margin to my tag, but this pushes up the whole of the li element

attached is a page with the css embedded, so hopefully you can see the issue, - the first link shows the image below the menu on hover, the next links show the image with increasing levels of negative margin.

eg

ul#cssmw1 > li#reviews1:hover > a:link {
	height: 200px;
	outline-style: none;
    background-image: url(CSSMenuWriter/images/image.png);
    border-bottom: none;
	background-repeat: no-repeat;
	margin-top: -200px;
}

Hey Craig

I had a similar 'issue' a couple of weeks ago - perhaps post 2 in this thread might help?

showthread.php?t=30282

Jamie

Thanks Jamie.

using your css, i noticed the key thing was setting a negative margin and a corresponding positive padding to each li hover class.

eg

ul#cssmw1 > li#home1:hover {
	outline-style: none;
	background-image: url(CSSMenuWriter/images/image.png);
	border-bottom: none;
	background-repeat: no-repeat;
	padding-top: 150px;
	margin-top: -150px;
}

When dealing with css issues, it would be better for me if I could analyse what was happening - rather than the trial and error approach I often have to use.

Anyway, it looks pretty good now, and I'm happy with it.

icing on the cake would be if the image which appears on hover was also clickable, as it stands, the image appears 'above' the navigation, but the clickable area is 'just' the text block.

I know what you mean.

In terms of making it clickable, you can make the whole element clickable.

It was just a question of creating the padding in the first instance. If it helps, heres the css I did for the one in the other thread which may help you to deconstruct/reconstruct:

ul#cssmw > li > a, ul#cssmw > li > a:link {  background-color: #5d5e61;  background-image: none;  border-left: 2px solid #fff;  color: #FFFFFF;  display: block;  font-family: Arial, Helvetica, sans-serif;  font-size: 14px;  font-style: normal;  font-weight: normal;  height: 25px;  padding: 120px 0px 0px 0px;  text-align: center;  text-decoration: none;  text-transform: uppercase;  width: 91px;  outline-style: none;}

<!--  HOME -->
ul#cssmw > li#home > a:active, ul#cssmw > li#home > a:focus {  background-color: #bc8548;  background-image: url("../images/misc/nav-arrow.png");  background-position: center 143px;  background-repeat: no-repeat;  color: #FFFFFF;  font-weight: normal;  text-decoration: none;  outline-style: none;padding-bottom:20px;margin-top:-20px;overflow:hidden;}
ul#cssmw > li#home:hover > a, ul#cssmw > li#home:hover > a:link {background-color: #bc8548;  background-image: url("../images/misc/nav-arrow.png");  background-position: center 143px;  background-repeat: no-repeat;  color: #FFFFFF;  font-weight: normal;  text-decoration: none;  outline-style: none; padding-bottom:20px;margin-top:-20px;overflow:hidden;}
ul#cssmw > li#home.current > a.current, ul#cssmw > li#home.current > a.current:link {  background-color: #bc8548;  background-image: url("../images/misc/nav-arrow.png");  background-position: center 143px;  background-repeat: no-repeat;  color: #FFFFFF;  font-weight: normal;  text-decoration: none;  outline-style: none;padding-bottom:20px;margin-top:-20px;overflow:hidden;}

As you can see in the first line, I created a padding of 120px which set the space which was clickable

Obviously this was just one navigation point but there were others which had different coloured hover/on states.

and for a visual ref, have attached a screenshot of the nav showing that the on effect isnt just limted to the text area ...

Thanks again for the tip.

I found setting the padding in the

ul#cssmw1 > li > a, ul#cssmw1 > li > a:link {

on its own wasn't enough, it just moved the image further up the screen in my example, so i tried setting a negative margin for this too...

ul#cssmw1 > li > a, ul#cssmw1 > li > a:link {
  background-color: transparent;
  background-position: 95% 50%;
  background-repeat: no-repeat;
  border-bottom: dotted 1px #9EA3AA;
  color: #343446;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-style: normal;
  height: 20px;
  line-height: 20px;
  margin: -100px 0 0 0;
  padding: 100px 10px 5px 5px;
  text-decoration: none;
  width: 150px;
  outline-style: none;
}

At the moment, I am just testing on a vanilla page layout so don't know if it will work in my design... but this gives me a larger clickable area!

no probs Craig... glad I could at least have been some help :D