Can't for the life of me figure out why the dropdown menus are displaying below the items on the top shelf. I've got the z-indexes and positions set right, i'm just missing something or got something in the wrong place.
Anyone help me out here.
Link to page: http://www.chelleon.co.uk/environ-skincare
The z-index on your header div is z-index:1;
The z-index on your top-shelf-products is z-index:1;
Change the div of your header to z-index:2;
you need to apply a z-index to .header to get this working:
.header {
.....
z-index: 1;
}
The reason being that the elements you want to put a z-index on's parent doesn't have a higher z-index than ones that are appearing above said element... confused with my text, cus i am!
Related
I'm working on a page for a class, just to display things (you can see them sorted by chapter in the body) but I originally had a list on the left that I used initially that just listed them all, and I wanted to keep it.
Problem is, once I started adding more CSS - I don't know where exactly - the area on the left just became completely unclickable. You can't highlight the text, you can't click any of it - nothing. I have absolutely no idea whatsoever what is causing this.
link to the site here
here is a pastebin link showing everything I have.
thank you, i really appreciate any help.
The .content div overlaps entire body area, because of "position: absolute;"
Add z-index: 9999; to #menu in your CSS and it should be clickable.
Other way is to use "position: relative; float: left;" to both .content and #menu, but you have to be carefull with their widths. Their sum of widths (including padding and margin and border) should be less or equal to the container width. In your case it should be body tag (actually a don't see body tag in your html).
That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.
More on z-index
I have a dropdown css menu that gets gets hidden behind the main page content when viewed in IE7. I've tried changing z-index values but have had no luck. I've also tried suggestions in other topics from this site but none have worked.
the page can be found here: www.melbournedodgeball.com.au/dodgeball2012/about
any help would be greatly appreciated
The CSS spec's paragraph on Z-index says that new stacking context is only created for positioned content with a z-index other than auto.
You have the li inside #nav with a position:relative, an apparently IE interprets this as a new stacking context.
Try this:
#nav li {
display: block;
position: relative;
z-index: 1; // force IE to recognize stack at this point
}
You need to add
position:relative;
To your <ul>
Z-Index is specified relative to all other elements in the same stacking context. You can have a Z-Index of 100 but it wont make a bit of difference if the elements belong to completely different stacking contexts.
I have test this code, It will work sure
Please set this css for IE7 only
#menu {position:relative; z-index:100;}
I'm working on the navigation for this website and am having trouble with the dropdown nav.
Basically, I have overflow: hidden applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.
For Products there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.
Is there a way to make the dropdown container within div#navigation ignore the overflow: hidden rule I have applied? I have tried setting position to absolute and playing with the z-index, but no luck.
Any suggestions to achieve the same result are also welcome.
Solution:
Remove position:relative; rule from box with overflow:hidden; and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden; will ignore this rule.
Demo: http://jsfiddle.net/88fYK/5/
overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.
Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.
if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"
.container {
overflow: hidden;
}
.your_dropdown_menu {
position: absolute;
}
try to put position:fixed on dropdown content.
.dropdown-content{
position:fixed
}
For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that
I have created a CSS dropdown menu, but when it drops down, it is being overlapped by the content, and renders useless.
How do i fix this?
Code
QUESTION SOLVED...THANKS...
Try changing the z-index of the drop down menu
http://www.w3schools.com/Css/pr_pos_z-index.asp
Set your z-index of your nav higher than your content and the problem will go away. For z-index to work properly in all browsers the element with the z-index on it much also have a position:relative or position:absolute.
Update
ul.dropdown { position: relative; border-radius:10px; z-index:9999}
#content{position:relative; z-index:100} /* #content should be whatever your content div is */
I have the problem whereby I can't keep my sub menu visible. When I hover over the parent <li> it appears, and then when I move down to select one of the sub menu items it disappears. This is as soon as focus is lost from the parent <li>
I can't find a solution anywhere.
can someone please check it?
http://www.mymediaventure.com/about.php. It is under the Pricing tab. This is so frustrating. other examples I look at seem to work and I can't spot any clear differences that would hint why theirs works and mine doesn't.
Thanks in advance.
The problem is in styles.css and has to do with your #main_content h1 title element overlapping your div#primary_navigation. You can fix it by setting a higher z-index on your navigation element as I've done in the example below.
#wrapper #top #right div#primary_navigation
{
position : relative;
z-index: 2;
font-size : 11pt;
margin-top : 72px;
}
And a little further down in the CSS:
#main_content h1
{
position : relative;
z-index: 1;
top : -20px;
font-weight : normal;
}
If you want to visually see the problem, add a background colour to your #main_content h1 and you'll notice it almost completely overlaps your tabs. As a result you can trigger the dropdown when you hover over the top of the Pricing tab, but as you move down to the sub items, your mouse goes over the title and the menu disappears.
#main_content h1 {
font-weight:normal;
position:relative;
top:-20px;
}
THis is the problem, try deleting the position:relative, or change it to something else, ie:absolute
My solution to this was to expand the padding around the parent so that the selectable/hover region was larger.
In my case I set something like: .nav a {padding: 20px;}
I had a similar problem and I've found a solution for mine. Now I'm not versed in coding at all, some light Dreamweaver, but that's about it. I was having this problem with a tumblr theme and none of these solutions worked. Only after changing top: 25px; to top: 20px;, the dropdown did work for my site. Hope this helps someone.
I followed the advice of the previous poster but with modifications. I changed all of my relative positioning to absolute for all items on the page (header, menu, and content) and this fixed the menu problem. I had to change for all three items for the menu to stop disappearing on mouseover.
I had a margin set on the <ul> which I removed and put on a div containing the <ul>.
anyway I managed to get a drop down menu from image hover effect, example and example code here dropdown menu from custom button image hover
I hope this helps someone
I had a similar problem: a drop down menu disappeared when the mouse pointer hovered over a part of the drop down menu at which underneath a adsense ad was shown. Putting the ad down in the html page solved the issue. Did not try out other solutions.
I also had this problem. The problem was that there was a space between where the main menu ended and where the dropdown menu began, so while moving the nouse down to the dropdown options, it would pass over an area of the background and the menu would disappear.
The fix was adjusting the top position as shown below (in my case, from 4.0 to 3.75em)
.main-navigation ul ul {
position: absolute;
top: 3.75em;
I had the same problem with the secondary hover navigation going away when i tried to move from the primary to the secondary menu. What seemed to help for me was to move the margin up into the primary menu. I added the following line to my already existing ul li ul { margin-top: -.1em; }