I have created a dropdown menu but the problem I'm having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider and content.
I looked online and trying to figure out the problem but cannot fixes.
Does anyone can hel me? Please if is possible explain really well.
Thanks in advance,
Helen
This is most likely down to the css z-index of the various elements on the page. Higher z-index values will position stuff on top of lower z-index values (providing they have a positioning value). However, you have to bear in mind that child elements cannot gain a higher z-index than their parent element, or at least you can assign the z-index to any value but they will always remain within the parent element at the parent elements z-index value. Most likely the slider on your page has a higher z-index than your header/menu bar.
Also, make sure you have position:relative, position:absolute or position:fixed or the z-index will be ignored.
If you're using a HTML list e.g. <ul> try adding a higher z-index to your list to bring it over everything else.
.dropdown li {
z-index:999;
position:relative;
}
I had a similar problem when working with my drop down menu and it showing up behind the slider. The slider z-index ranged from 1-5 so I made the z-index of the drop down much larger and it now displayed correctly.
Related
I am getting a strange anomaly with my z-indexing. I have an image which I positioned relative with a z-index of 1, and that sits above my navigation which is positioned absolute and has a z-index of -1.
The issue is that on page load the image is behind the navigation until you scroll down and back up again, then it corrects it self and sits above the navigation as it should.
Any ideas on what might cause this?
Only set the z-index on the item you want to be ON TOP of everything else. Every element has a default z-index, so you don't need to set it on your nav menu. Just set the z-index on your image to something like 999999 to be on top:
z-index: 999999;
You could just use a z-index of 10. I think your problem may be setting the z-index to negative. I think other elements z-index default to 0? So putting it to -1 could make it behind another element and causing a weird result.
Edit: just noticed you said your nav menu was absolute. So you would have to have a z-index for it. Instead of it being -1, change it to 10. Then for your image, change it to 20.. or 100.. anything higher.
I have a project, that has a Camera.js slider. The Drop-down submenu is rather long, and it keeps appearing below the slider.
I have tried switching around the position for the nav element with absolute, relative, fixed, gave it z-index of 99999, but still no change.
Can somebody help me out? I am out of ideas. The site is published here: http://www.xn--ftsszerels-c7ah27o.info/
Set your camera_wrap class z-index: -1.
i don't see any positioning/z-index set on the div.container element so try setting position:relative; z-index: (less than what is set on nav)
i think that should do it
I have a Drop Down menu and a slide show. I want my DD menu to be over the slide show, not the oposite.
I have tried z-index, but it didn't work.
Thanks.
EDIT: I solved it, z-index wasn't in the right place.
That's a common one, I recommend you use Chrome Developer Tools or Firebug to inspect your element and see what css properties are being applied.
Another gotcha is that elements must have a CSS position. If an item has a position of static or no position is specified, it won't be affected by the z-index.
Website is: http://www.talons-guild.com/forums/
Please try to click the link on the left side that says "Home"--it does not work for me. Any idea why?
You can fix it by removing the z-index property from div#header on your CSS.
Because your div with ID of header is on top of it with a higher z-index, which essentially blocks it. Give your paragraph with class menu a higher z-index (and a position) and it will work.
The Header Div Container witch include bird size over the text and it z-index over it too so change size or z-index for item menu
<a style='z-index:10;' href="http://www.talons-guild.com/index.php">Home</a><br />
regard's
I'm building a navigation menu for a website and the menu has submenus. When the submenu slides down, it needs to lie behind the main navigation. I've tried using z-index but it won't work. Since the submenu is a child of the LI, is it not able to lie behind?
The code is a bit verbose due to the image sprite, so I'll link to a pastie:
http://pastie.org/1100075
And here's some images to support my explanation.
Desired outcome: http://imgur.com/WeU5T.png
Current outcome: http://imgur.com/0ZC4v.png
Move the li.home a link out side of ul.nav, and put it inside of an absolutely positioned block element with a z-index > 0.