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.
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/
So currently here: http://pixphoriad.haneuri.net/header.php
I have a link hover effect on the top five links that I snagged online somewhere.
What I want to do is add a smooth css drop down menu from the "Resources" link but when I tried to play with it, nothing worked. I don't understand a whole lot that's going on with that current code in regards to that hover, and I'd like the link hover to stay the same, just have a drop down menu with links when hovered over.
I am using a drop-down menu written in CSS. Been able to get it to my liking but one thing seems to elude me. I want the drop-down menu to close upon mouse click on an item. Fiddling around with :target for some time, just cannot make it work.
http://www.jsfiddle.net/DAtLC/
I have edited the CSS on my menu on this site:
So it would display completely across at the font size I want (previously it was turning into a two layer menu). However, now for some reason the submenu under "Show Your Support" is very difficult to click on. When you hover and try to move your mouse down to an option it disappears half the time before you can click on anything.
I have played around with the code in Chrome (inspect element) and I can't seem to find out what is wrong. Can someone assist me, please?
Thank you.
There is a gap between the menu and where the sub-menu appears. See Image below:
When you hover away from the menu item and the mouse is on its way to the sub-menu, the mouse ceases to be on 'hover' (while crossing over the gap) - making the sub-menu disappear.
If you can eliminate the gap (i.e. place where the sub-menu is positioned higher up the page), the 'hover' state will remain on mouse-move and the sub-menu will stay 'shown' for clicking.
Does that help?
PS
posted as an answer (instead of comment) so I could include the image in my explanation.
In your show your support tag, inside add this style
style="padding-bottom:10px;"
So that I am able to operate now without any hover before on click issue. try and let me know. I tried in IE.
My menu looks great in firefox and chrome. But IE. It dissapears. Anybody can help me ?
http://tinyurl.com/6yzd2jc
Here's my guess as to what's happening. Could be totally wrong.
The dropdown is supposed to disappear when the user mouses out of the link or the dropdown itself. But the problem is, there's a gap of a few pixels in between the link and the dropdown; this shows up in all browsers; I had trouble with it in Chrome before I even opened IE.
But when I did open it in IE, I saw that the links were even further away from the dropdown menus, so the problem was exacerbated.
If you go back to the CSS and make sure that there's no gap in between the link and the dropdown menu, does that fix the problem?
Edit to actually answer the question
There are a few CSS changes you could quickly make to fix the problem:
Get rid of the height style on #mNav
Add a <div> with the style clear: both to #topNav, after the <ul>
Give each ul li a style of height:25px
It's not pretty, but I think that solves it.