I'm trying to make this suggestion box be on top.
I can't get the z-index to work properly. Any suggestions on how to edit the CSS to make it overlap the next content block?
Site URL: https://shop.cph.dk/thejourneyison
.class {
position:absolute
*or*
position:relative
padding: 0px;
z-index: 10000;
}
I was request to use the Lit Theme from MDNW, on the dark skin the sub-menu doesn't even appear visible when mousing over the menu (but the light theme it does). How would I go about fixing this?
I had seen that someone suggested on another question pertaining to a sub-menu not showing on their own project by applying a relative position (position:relative) to the super-containers and descending z-index to each super-container as you go down the page.
This theme is no longer supported by the developer, but still being sold.
Demo: http://lit-dark.mdnw.net/
Thank you for your help.
In skin-dark.css
/*MAIN BG*/
body,
.container{
background: #000;
position: relative;
/*z-index: 1;*/
}
Remove the z-index
The website is http://columbiamillworks.com/photo-gallery/arches/
If you hover over "photo gallery" in the main nav, the dropdown is positioned behind the galleary plugin and you cannot click any links below the gallery-wrap. I have tried using z-index to no avail.
Any idea why those links aren't clickable?
Remove z-index from #main-nav.
It causes z-index of 100, while its children have z-index more than 100.
Removing it will resolve your problem.
Thar's cause the gallery wrapper is deeper in the DOM tree than the menu.
Therefore, you'll need to apply the z-index to the parent containers of both the menu and the gallery, which are on the same DOM level.
In your case that would be:
#headerwrap {
position: relative;
z-index: 2;
}
#body {
position: relative;
z-index: 1; // so the gallery container is actually lower on z axis then the header
}
I've messed about with z-index until I'm blue in the face on this one now.
It's no doubt going to be simple though.
Please view this website and hover over 'Why Us' in the navigation menu. The dropdown menu appears behind the slider. I'm sure it must only be a z-index / position issue but I've not managed to see where the problem is.
(Not posted jsFiddle or code because imagine it will be quicker for you to identify issue directly in browser/on website).
You can solve it with z-index alone (plus fixing the overflow, too, so not really alone, I guess).
header.container {
overflow: visible;
z-index: 2;
}
#page.container {
overflow: visible;
z-index: 1;
}
There are two issues. This does the trick:
nav.container {
overflow: visible;
z-index: 1000;
}
The z-index doesn't solve it alone, as the sub menu is cutted by the hidden overflow of the <nav>-element.
dont forget to add
header.container {
overflow: visible;
z-index: 2;
position: relative // without this sometime z-index doesnt work
}
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; }