The site I am developing is http://181.224.157.58/~differ65/hangfungsf.com/ and I am trying to get the menu to stay on when the mouse is hovering over it. I am not sure what is wrong, so can someone have a look please?
I think that the animation time of the menu is to slow.
When i hover over the menu and go down immediately it causes the menu to disappear because as i go down with my mouse the menu is not loaded yet.
You should speed up the animation or remove it to fix this issue.
Related
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.
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.
can't seem to find what the problem is. firefox works fine - but safari doesn't.
a simple css dropdown menu but in safari the dropdown drops down but as soon as you try to place the mouse on the dropped down element it goes away - only if you move your mouse extremly fast on the dropped down element it doesn't hide.
http://singknaben-v2.marknolan.ch
hover your mouse "DER CHOR" and try to navigate on a child element with safari.
i can't see what the problem is. any help appriciated...
thanks,
mark
The problem is that the element is not tall enough. The mouse stops hovering over the element before it can reach the subelements. It can be quite simply fixed by applying a "height" css style of around 30px.