I have a (css) drop down menu that keeps disappearing before you can select anything from it.
I have wracked my brain searching the web for answers... and in an article on YOUR site I found a hint -- about z-index.. I readily admit to being quite a NOOB when it comes to CSS and I tried and tried to implement the suggestion from your other article, but to no avail.
Here is my site: http://www.customernationonline.com/
The problem is with the drop down for "How We Help".. I would be hugely grateful if you could take a look and help me out here.
The (eloquent) fix was hard to find, (it took me a while to figure out, at any rate!), but it's very easy:
On #pillmenu2, remove position: absolute.
I'd say the mouse out on the menu item is closing the dropdown
sfEls[i].onmouseout=function() {
39 this.className=this.className.replace(new RegExp(" sfhover\b"), "");
40 }
perhaps close the menu item only with an onclick command either when a sub menu item is selected or on the body. better still look at the jquery implementations and save yourself a headache.
Related
I tried for a few hours now to figure out why my sub menu disappear when I hover over the parent menu.
Live demo: http://topforexbroker.net/kafi/
I could possibly remove the margin-top from my sub-menu class and easy fix but then my border 1px at the top of the sub menu goes away :)
Any suggestions or tips would be greatly appreciated.
Demonstration of the issue: https://gyazo.com/5387a96e4c86f4fb1cbef9aa8715ed71
Thanks!
I finally managed to solve the problem, as I said in my first post this margin.. I changed some of them on the sub-menu class and the primary-menu and now it works.
There is no thing wrong with your CSS. I usually add a timeout like 200ms before hide sub-menu to avoid this situation.
This functionality is related to your jQuery script and is not a CSS issue. Im assuming there is some sort of event listener probably
.mouseleave()
which has a function to hide your submenu. Change that and this behavior will go away.
https://api.jquery.com/mouseleave/
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
I've been smashing my head against a wall for about 3 hours now and guessing what's going on isn't working either. Can someone please help me rescue my waning sanity?
Basically in IE7 the second level on this menu just won't stay open when you try to hover over it. I've tried z-indexes, containers with position: relative set, line heights, borders, padding...everything!! What am I missing? ARgg!! Must be something obvious at a guess but my tired brain has just given in.
http://www.sah.org.au/devt/
Thanks for your help!
John.
That really is frustrating.
The only (almost there) solution I could find was to add a background-color to #menu a. You can change it to the correct colour on :hover for the different links. Or, just move it from li to a.
Weird, right? It massively helps.
I'm reasonably sure that a perfect solution is going to require (ugly) HTML changes, or writing jQuery to do the same thing (for only IE7).
Based on your comment on the code that says
/* using left instead of display to hide menus because display: none
isn't read by screen readers */
I found you don't want sub menus got read by screen reader. I did a research and found out most of the screen readers don't read the visibility:hidden elements. My suggestion to you is removing the left:-999em and replacing it with visibility:hidden and dsiplay:none together.
Here is the article about screen readers:
http://www.alistapart.com/articles/fir/
I have created a CSS dropdown menu using suckerfish. The problem with it is when you click the top level nav item that takes you to category pages, the pointer is still over that nav item and the dropdown appears automatically in IE.
Its fine for Firefox as the dropdown will not appear until I move the mouse, however IE just kicks in straight away without any mouse movement at all.
As the menus are quite large the user is unaware that the page has changed underneeth.
This site http://www.foodnetwork.com/ seems to achieve what I want, with a slight delay before the dropdown appears again. I know they are mixing it up with JS and CSS, but cant quite work out what they are doing.
Any thoughts
I know you are currently using a different technological solution to this problem, but please at least take a look at my suggestion before you judge it. I'm not good enough to explain it outright, so I'll just give you a couple of bullet points and then link to the solution in an effort to assist you.
This solution contains these attributes:
No client-side scripting of any sort (Javascript) was used
Absolute browser and platform compatibility
Text scaling friendly
Narrow window width handling
Functional for non-CSS, or CSS-disabled, browser
Placed into the Public Domain
The site where the file is posted uses this menu (it's owned by the writer). So, please visit this GRC's Script-Free Pure-CSS Menuing System page.
I really hope this helps you!!
Use jQuery's hoverIntent to achieve that delayed effect. In addition, the menu stays there even if the cursor momentarily moves out of the menu. Prevents that distracting flicker effect of menus appearing and disappearing.
Just throwing this out there, since there may be other changes you wish the menu had as well:
You may want to consider Superfish (an updated/upgraded [and possibly overkill so take a look] version of Suckerfish), one of the additions is the delay option on the menus.
So I got the solution for this.
I added the CSS with JS in the head of the document and set a small delay on it. This way when the user clicks the main nav link the dropdown is hidden by default with the CSS and then made to reveal with the CSS that is written in with JS. The user sees a page without the drodown on page load, and then after 1.5 secs the dropdown appears, therefore showing the user the page reloaded.
// Add dropdown styles
function addDDStyles() {
var head = document.getElementsByTagName('head')[0];
var logindiv = document.createElement('link');
logindiv.setAttribute('type', 'text/css')
logindiv.setAttribute("rel", "stylesheet");
logindiv.setAttribute("href", 'http://files.stv.claw/css/dropdown.css');
logindiv.setAttribute("media", "screen");
head.appendChild(logindiv);
}
setTimeout('addDDStyles()', 1500)
This one's got me stumped. Usually with a little CSS juggling here and there I am able to solve most IE7 CSS bugs, but not this one!
Head on over to the example page and view it in IE7, you will soon see that when mousing over the (vertical) drop down menu on the left of the page, it opens the sub menu WAY over to the right. I have pulled every last hair out!
If it helps, the menu was made with 'Sothink DHTML Menu 9'
As always, all replies are much appreciated.
Sothink is not the greatest solution, try this:
http://www.alistapart.com/articles/horizdropdowns/