Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm trying to setup some horizontal CSS drop down menus.

Where things get different for me, is that both main menu and submenu must both be horizontal, and text aligned right - purely for synthetic reasons.

The second menu uses absolute positioning and all the items are floated left to achieve the right order, and of course for aesthetic reasons, the menus must be 100% width of their container.

First off I havent found a way to align right, it doesn't want to know. If I float the ul right without width, then the submenu only takes up the width of the parent ul.

Going left is fine.

So to hide the submenu unless hovered, we use selectors on li:hover>ul to display:none. But I want the active menu to always be shown and overwritten effectively when another menu is hovered. But Im finding in this case, anything before the active display:block will now show, but anything after, will be.

I'll post the code samples later tonight.

I won't even get onto problems with background colours yet and subling li's changing the background colour of the parent ul!

share|improve this question
This is off topic for this site and you do not provide enough information for me to migrate it to Stack Overflow. After you post your code flag this question so it can be reopened and migrated. – John Conde♦ Apr 21 at 21:13
Rather than using display:none; you should opt to use position:absolute;left:-9999px; then on the hover element make it left:0 – bybe Apr 21 at 21:52

closed as off topic by John Conde♦ Apr 21 at 21:12

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

Browse other questions tagged or ask your own question.