Drop down menu with images

[wa9578]

Hi all,

I'm trying to design a website with a multi layer drop down menu (least I think thats the name for it).
I've managed to make it so the drop down menu works, and when added in another sub menu (as part of the drop down) have managed to make it hide, but I can't get the hover to work. I might have missed something in the coding (more than likely) but I keep fiddling and changing stuff and it doesn't want to play.

To take it another level, I'm wanting the sub menu (when you hover over the name) just to show an image and when the image is click to go to a different page (hope that makes sense).

The HTML looks like this (tried to include the important stuff and get rid of the garbage)

<div id= "wrapper">
<div id= "siteNavigation">
<ul><li><a href="#" class="active">Home</a></li>
<li><a href="#">Team</a> 
<ul>
<li><a href="#">Lucy</a></li>
<li><a href="#">Hannah</a></li>
<li><a href="#">Phil</a></li>
<li><a href="#">Claire</a></li>
<li><a href="#">Carly</a></li>
<li><a href="#">James</a></li>
<ul> 
 
<li> <a href="#">image/details</a></li> <!-- I want this to be a picture when once clicked takes you to a URL --> 
 
 
</ul> <!-- end james pic -->
 
</ul> <!--end inner ul-->
<li><a href="#">Trainees</a></li>

</ul> <! End Ul-->
</li> <!-- End li main-->
 
</ul>
 
</div> <!--siteNavigationend-->
</div> <!-- wrapper end-->
</body>
</html>

and the CSS looks like this;

 
}
#siteNavigation ul ul { /**this is the thing I used to hide the drop down menu**/
position:absolute;
visibility:hidden;
top:32px;
 
}
 
#siteNavigation ul li:hover ul { /**this is the thing I used to show it with a hover**/
visibility:visible;
 
}

Any help on this would be greatly appreciated... finished product should mean hover over 'team' to get a drp down list... hover over a name to be given an image to the right of name, clicking to redirect to a specific URL.

Many thanks in advance

[wa9578]

me again lol (I know it won't be until tomorrow)

margin: 0 auto; /* will center the whole navigation if the width is less than 100% */

It's positioned over to the left (width set to 99% as I want it to go all the way across the page (the lines anyway)).

other than that everythings great, just got to get my affiliate drop down thing back again and then link up my handouts :)

[SuzyUK]

Ok I'm still here but I do admit to now having a lovely glass of Merlot beside me..

just remove that line then.. also remove

width: 80%;

from the same rule - I only put that in as it's usually the first thing asked after a long technical explanation - "How do I center blah blah.." - one rule works with the other as in my note, if you want an element to be 99% change width to that, if you don't want it centered remove

margin: 0 auto;

.. simplez ;)


I can't promise sense for the rest of the evening, so am now stepping away from the keyboard :)
cheers
Suzy

[wa9578]

:s I never got told about you messaging back about this (just checked it on the off chance lol)

Well the sites pretty much up and running now :) still can't get that bit to center but as changed bits of the css for formatting will have a look at it all again and see what have changed... I will not give up lol