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; }
Related
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
I am having really trouble fixing this overlapping issue on a wordpress site.
I am working on this http://dev.chrisosheaphotography.com/home/ and i have the sub menu under "Portfolio" but the image is overlapping the sub menu and it is hidden in the back of the image. I want the submenu to appear in front of the image.
I tried using z-index: -1; for #wrapper but it is not working.
Any help would be much appreciated.
Its an easy fix, just add relative positioning and a positive z-index to:
<div class="sub-menu sub-menu-1"></div>
e.g.
.sub-menu {
position: relative;
z-index: 1000;
}
You should also try adding some code and context to your question so that it doesn't get closed for being too localized ..
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!
I want to constrain the width of an <ul> tag in a dropdown menu in CSS to the width of the parent <li>of that <ul> in the simpliest possible form, and without setting any fixed with.
I had made a lot search and testing, without achieving it or understand it. Precisely, I want to understand how it works.
What could the property that could make it happened ?
I have settled the simpliest jsfiddle http://jsfiddle.net/zAXRK/2/ I could come up with to see if someone could explain why if it's possible, and how ?
I you try the example, when you use the cursor to over the First Item = the sub-menu appears and the <li>who contains it, is going larger, pushing other elements.
What I want to do is making the sub-menu inside the width of its parent element, whatever the width, and without fixing it. (if there is no solution, I'll do it with JS, but I would prefer have it clean in CSS and I think this a good exercice).
Thanks to anyone willing to help me understand CSS rules. If the answer is somewhere outside, either I didn't find it, or I didn't understood it, please forgive.
You need to set some position properties on the li and the .submenu so you can set a width: 100% (it's not a fixed width, I hope it's not a problem):
Here are the changes :
.menu > li {
position: relative;
}
.sub-menu {
position: absolute;
width: 100%;
}
And the working jsFiddle.
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 */