How to change a horizontal drop down menu to do this?

[Kimberly Tune]

I have a working horizontal drop-down menu that is css driven, on hover sub-menu items currently appear below the parent item. I however, would like to know if I can make them appear ABOVE the parent item instead. I know it's not traditional but the site I'm working on would be perfect if I can get it working!

I'd appreciate any and all info!

[Death Slaught]

Yes it's possible, but we need either a link to your site or the code you're using.


Thanks, Death

[Kimberly Tune]

No problem! www.altruisticsolutions.net/ts2 I appreciate the help! You should see the menu currently drops down (about us)- I don' t have the menu fully populated yet or anything.

[drhowarddrfine]

I don't see any menu at all.

[JKing]

To make your dropdown appear above your menu you want to set the sub menu ul to be positioned relative to the bottom instead of the top.

I copied your html for your menu and the related css. Below are the changes I made.

.art-menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  /*top: 0;*/
  background: none;
}
 
.art-menu li:hover>ul
{
  visibility: visible;
  bottom: 0;
}
 

[Kimberly Tune]

Thanks so much, I had tried something similar but I missed the change to .art-menu ul! It works now, thanks!

[Kimberly Tune]

Can I ask what browser you're using that you don't see the menu?

[Death Slaught]

1. This solution only works in Firefox, and only one submenu appears.
2. The menu is shoved to the left in Safari and Chrome; and Opera has a z-index issue with the submenu. I don't have IE. Also, Chrome scrolls your content.
3. You're floating elements contained by an absolutely positioned element. This removes these elements from the normal flow of the page.
4. Unless you have 12,999 other elements that need to be on top of one another - the z-index value will never need to be 13,000. It's confusing and takes more time to find the smallest or largest value.
5. Have a look at this.

Regards, Death

[Kimberly Tune]

Bah, I had only looked at it in Firefox and Explorer so far. I only had 1 sub menu up so far, so there was nothing else to show the new additions seem to be popping up okay. I do see the issue with Chrome now that I'm looking at it. That should be fun to try to fix...

[Kimberly Tune]

2) Anyone have a better solutions for centering that DiV? (the menu) One that works in Chrome too?

#wrapper {
position: absolute;
bottom: 50%;
right: 50%;
height: 500px;
width: 600px;
}
#container {
position: relative;
left: 50%;
top: 50%;
}

html-

<div id="wrapper">
<div id="container">
<div id="top-menu"><jdoc:include type="modules" name="user3" /></div></div></div>

[Death Slaught]

I thought I had checked this in Firefox but apparently I didn't. It's what Doc was talking about. The menu is shoved all the way down and almost off of the page. You can see a few pixels of it.

As for fixing all of this... The image you're using for the menu's background is requiring too much work. Just edit the image to fit to your menu, not vice versa. This should free up a few things for set stylings.

Do you understand the relationship between the browser and an element being styled with a fixed position?


Thanks, Death