CSS dropdown menu using p7exp

[York]

I am building a horizontal dropdown menu using CSS and PVII. When it is completed, I'd like the menu to look like this URL removed.

I'm using PVII Express in addition to CSS for this reason: when the user scrolls down the dropdown menu, I would like the nav button (the orange "look" button in the sample image) to stay selected (to stay orange, in this case, and not revert back to the default gray state.) If that is possible to do entirely in CSS, then please educate me.

I would like to make this functional in IE6, IE 7, Fiefox 1.5 and Firefox 2.

Please visit sorry no urls using IE and Firefox to see how it does NOT look like the sample image. You will see that the primary problem currently is the appearance of the dropdown menus themselves. If you can help me make them look like the sample image, I'd be most grateful.

You can view the validated CSS and XHTML using the Web Developer toolbar in Firefox, or, if preferred, I'll modify this posting to include them.

Thanks in advance for any assistance.

[edited by: SuzyUK at 10:41 am (utc) on Jan. 30, 2007]
[edit reason] examplified, please no URL's per TOS#13 [/edit]

[sldesigns]

Sorry, I had posted what I thought might be a fix, but when I played with it further I realized the hover didn't work.

On another note, the dropdown items are inheriting size from the parent <li> element and that is an easy fix:

#nav ul li ul {height:20px;}

I wish you luck!

{ps - they're going to take down the urls soon -- not allowed to post. might want to clean up the css a bit to post.}

[SuzyUK]

Hi York and Welcome to WebmasterWorld!

I've edited out the URL's from your post, but before I did I took a look to see if the code could be summarised, but it appears to be doing what you want now (as in the top level is remaining highlighted while you hover over the drop) - did you get it fixed?
linking to examples that no longer show the problem is one reason we don't allow them, the question makes no sense to those following later, like me ;)

Anyway if you've still got questions about your menu, it makes no difference to the CSS which method of scripting the :hover is used (in your case it's PVII, some use suckerfish and some use a csshover behaviour file) the CSS logic required get the effects you want will still be the same so if you have other questions could you just post some SUMMARIZED HTML and CSS. We know that if we can get it to work in FF/Opera it then just requires tweaking of some class names to fit with your chosen script to make it work in IE6 and below.

Let us know
Thanks
Suzy