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/
Related
Hey guys I have problem And I'm sitting all day trying to figure it out...
Problem is that if I click on button (succes, danger, custom) it gets a bit smaller:
When button becomes :active it will do this... and this applies only to btn class...
What could be the problem?
I tried setting active link font-size, but it's just make everything worse...
Just writing my own comments as an answer as this help him to figured out the solution
your css might be messing around with button, on button plz do inspect element and check on active state this way you'll figured it out on your own
I am having problems with my drop down menu. When I try to click on one of the links in the sub-menu, focus is lost from the parent and so the menu disappears, making it impossible to follow the links in the sub-menu. I have searched this forum and google and although there are many similar issues, I can't find any solutions to my particular problem. I would greatly appreciate any help on this. The site is www.emmatuscaloosa.com and the sub-menu is under the "categories" button.
Dont display the sub-menu none.. rather hide it with opacity.
I worked out a pretty simple fix for this by adding some CSS to the sub menu hover state. Im hiding / showing the sub menu using the max-height property and fixed the issue by writing:
.sub-menu:hover {
max-height:100%
}
That simple! Whenever the mouse is hovering on any sub menu item the menu must stay visible, allowing enough time to click on the enclosed links. Not sure if this is the "proper" way to fix the issue but it's working like a charm.
Dont' use focus. There are other ways, for example you could use :target or :hover to open the submenu. Using target, you will have to add an id to the submenu.
Target:
.sub-menu{display:none;}
#categories:target{display:block}
Another way is to use Javascript.
The problem is I cannot get dropdown menu to show on top of ng-grid. I've even tried manually setting the z-index property on every element via FireBug but still cannot get it to work.
I'm hoping someone with similar experience can help..
Here's Plunker sample
It kinda works if you set:
.ngViewport {
overflow:visible;
}
in style.css. But it does not look very nice. May be take this forked plunker as a base for further experiments.
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 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.