2 horizontal menus w/ vertical drop downs.

94 Posts

wirkkalaj Reply #1, 16 years, 5 months ago

Quick question.

I have 2 Horizontal menus on my website (http://www.themovietimeline.net/modx), and both have vertical drop down sub-menus. I need the top menu to be in front of the lower one, so that when you’re hovering over the top drop downs it doesn’t switch over to the lower ones, and I need both of them to be in front of everything else on the main page layout. Is there a way to do this? I messed with the z-index a bit, but that didn’t seem to do it. Unless I just had the numbers reversed or something.

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

94 Posts

wirkkalaj Reply #2, 16 years, 5 months ago

Can anybody help me out?

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 16 years, 5 months ago

You should have been on the right track with the z-index, but I think it would take more than just "a bit" of fiddling with it to get it right.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

94 Posts

wirkkalaj Reply #4, 16 years, 5 months ago

Thanks. I pretty much got it to work with the z-index. I guess the z-index only works on elements that have a position called out, so I had to do that, and then it worked. Except it’s still a bit touchy! Sometimes I can hover it just fine, and other times it will get canceled out by the nav bar below. I’ll live with it for now.

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

1,572 Posts

Paulp Reply #5, 16 years, 5 months ago

Sometimes I can hover it just fine, and other times it will get canceled out by the nav bar below. I’ll live with it for now.

It’s not getting canceled by the nav bar below, there’s a 1px gap between the li ul on the top nav so if your not quick at going down it goes off the hover and the sub nav disappears. Try changing:

.menu2 ul li ul {
display:none;
}

To:

.menu2 ul li ul {
display:none;
margin-top:-1px;
}

94 Posts

wirkkalaj Reply #6, 16 years, 5 months ago

Thanks a lot paul. That did the trick!

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

1,572 Posts

Paulp Reply #7, 16 years, 5 months ago

No Problem grin

94 Posts

wirkkalaj Reply #8, 16 years, 5 months ago

Hey ya’ll. My site and menu bar looks great in Firefox, but I just noticed that my website looks like shit in IE8. First off, it isn’t centered in the browser at all, and my top 2 menu bars don’t hover or drop down and my search box and a few other items that aren’t close to where they’re supposed be. What gives? Is firefox reading the css right, and IE isn’t, or is it the other way around?

I uploaded a css file for my menu bars and a comment. <!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/basic_dd2_ie.css" />, but it still doesn’t work right.

Can you take a look at my menu bar css, and my main style css (I assume the sheet with the wrapper and my container are the problem for the page not being centered) and let me know which sections are messing up the IE display if any? Or let me know if there are any exceptions and I need to add for IE or Firefox and give me a link?

My main style.css is here: http://www.themovietimeline.net/modx/assets/css/style.css

and My top menu css is here: http://www.themovietimeline.net/modx/assets/templates/wayfinder/basic_dd2.css

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

94 Posts

wirkkalaj Reply #9, 16 years, 5 months ago

I figured it out. All I had to do was add a !Doc type declaration, if anyone needs to know.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<a href="http://www.themovietimeline.net">The Movie Timeline</a> | <a href="http://www.antstuff.net">The Antfarm Site</a>

☆ A M B ☆
24,524 Posts

sottwell Reply #10, 16 years, 5 months ago

You should always have a Doctype declaration; without it most browsers go into a default "quirks" mode, which especially in the case of IE is definitely not desirable.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org