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/
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 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.
The top menus at www.petersencreative.com use CSS (and some CSS3) to provide the smooth transitions. My problem is that if you click a link and then mouseoff the link, it starts to descend again. Is there a way to keep it up (fnnnrrr!) once it's been clicked and then mouseoff?
I've looked at using :active but that only for when the mouse is down. :focus only seems to work for keyboard navigation. Am looking at using a bit of jQuery or is there a way to do it using CSS?
Can be done with CSS, using :target selector.
I've tried the traditional Javascript rollover method and CSS background switching method, but nothing seems to work -- apparently when you're hovering over the close button you're actually...not.
Using Lightbox Gallery plugin in Wordpress.
Any suggestions?
Have a good one,
Andrew
button you're actually...not.
Indeed, You're actually hovering the whole picture (except the right and left third which is for next/prev button).
Try using FireBug, Use it and you'll know what are you really hovering over.