CSS Dropdown disappears when displayed over image.

[cbull002]

Greetings,


I am having trouble with the navigation on my site. I have a drop down navigation bar and when it is displayed on top of an image, when you hit the image the menu disappears.

www.crbigbikerentals.com/rentals.html is the page where this can be demonstrated. Under the motorcycle tab.
www.crbigbikerentals.com/cycle1.css is the style sheet.

Cannot figure out what is blocking the menu from displaying correctly.

Thanks,

Charles

[ralph.m]

Hi cbull002. Welcome to the forums.

What browser is this happening in? It works fine for me in Chrome (the drop list sits over the image).

[cbull002]

Thanks ralph.m

Chrome, It sits over the image but when you go to mouse over you can stay on the menu until you come to a li that is over top of the picture and then it disappears.

[ralph.m]

Ah, I see. It's the h3 causing the problem, it seems. Anyhow, try adding this to your CSS:

#navbar {
  position: relative; 
  z-index: 100;
}

[cbull002]

Thank you so much.

Worked perfectly.

I think you mean that the relative position I have set for h3 was causing the box to vanish because it was rendering the h3 in front of the menu.

That makes sense. I still have some to learn about how positions affect each other.

Thanks for the help.

fyi, the customer chose that background specifically. I am still trying to talk him out of it.

[ralph.m]

Cool, glad that worked.

fyi, the customer chose that background specifically. I am still trying to talk him out of it.

Ah yes, clients! Can't live with 'em, can't live without 'em.

[cbull002]

Hello,

I am still having a little trouble with display in Firefox. The same menu is this topic creates margin below the menu so when you try to crossover onto the ul ul you have to be really fast or your out of luck. I can see that it is five pixels and the only margin that is 5px is ul li a and ul ul li a and those are on the right side of the boxes. http://crbigbikerentals.com/contact.html


Thanks.

[ralph.m]

Ah yes, happens in Chrome too.

Instead of this:

#navbar #holder ul ul {
position: absolute;
top: 53px;
visibility: hidden;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px black solid;
overflow: visible;
}

try this:

#navbar #holder ul ul {
position: absolute;
top: 51px;
visibility: hidden;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px black solid;
overflow: visible;
}

If you want to keep the appearance of the gap between the top link and the drop list, you could add this line in red:

#navbar #holder ul ul {
position: absolute;
top: 51px;
visibility: hidden;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px black solid;
overflow: visible;
border-top: 2px solid black;
}

[cbull002]

Thanks Ralph.M. I will get back to you if I have more issues. I have settled on the layout for now. There is no perfect meeting point for cross browser fun.


Charles