Wed, 2013-08-07 04:03
Can someone explain to me why my submenu disappears on mouse out? I have been running in circle for over an hour in google search about that? Nothing works.
Here's the site:
Here's the usefull part of my css code which rules the menu. Thanks:
/* =Menu -------------------------------------------------------------- */ #access { background-color: #54b6e4; border-radius: 7px 7px 0 0; clear: both; display: block; float: left; height: 41px; position: absolute; width: 1000px; } #access ul { font-size: 12px; list-style: none; margin: 0 0 0 -0.8125em; padding-left: 0; } #access li { float: left; position: relative; background:url("images/nav_border.png") no-repeat scroll right center transparent; width: 100px; } #access a { color: #fff; display: block; line-height: 3.333em; padding: 0 1.2125em; text-decoration: none; } #access ul ul { -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; float: left; margin: 0; position: absolute; left: 0; width: 188px; z-index: 99999; border-bottom: 5px solid #1C6818; border-radius: 0 0 5px 5px; border-top: 1px solid #1C6818; } #access ul ul ul { left: 100%; top: 0; } #access ul ul a { background: #54b6e4; border-bottom: 1px dotted #b5bec5; color: #fff; font-size: 12px; font-weight: normal; height: auto; line-height: 1em; opacity: 0.9; padding: 10px; width: 168px; } #access li:hover > a, #access ul ul :hover > a, #access a:focus { background: #e35f06; -webkit-transition: .4s ease-out; } #access li:hover > a, #access a:focus { background: url("images/nav_hover.png") no-repeat scroll center top transparent; /* Show a solid color for older browsers */ color: #ffffff; height: 45px; -webkit-transition: .4s ease-out; } #access ul li:hover > ul { display: block; } #access .current_page_item > a, #access .current_page_ancestor > a { font-weight: bold; }
Wed, 2013-08-07 04:44
#1
Transition?
Do you mean the transition doesn't work as expected? Or, are you expecting the sub-menu to remain visible after the pointer is removed? If the latter, why would you expect that? If the former, have you used the validator to see that there are no syntax errors?
cheers,
gary
Wed, 2013-08-07 11:39
#2
Answer to Gary
Hi Gary,
I need a delay to make sure the submenu remains at least 1/2 a second after I move the pointer from the main menu item to its submenu. I need to access the submenu items but can't. It disappears to quickly once I move my mouse out of the main menu item.
See the site which I forgot to paste the link in my first message: site
Wed, 2013-08-07 14:37
#3
Transition not needed
The problem lay with there being a structural space between the li and its dropdown ul.
Pay close attention to the subtle changes I made. Notice too that I have ignored the silly wp class names and used a simple cascade of selectors. You may need to integrate this into the wp crap, but that's your baby, not mine. 
<!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Test Doc</title> <style type="text/css"> /*<![CDATA[*/ p { background-color: yellow; padding: 1em; } ul { background-color: blue; color: white; margin: 0; padding: 0; list-style: none; } ul#menu { display: table; } #menu li { outline: 1px dotted gray; float: left; margin: 0 1em; position: relative; } #menu li:hover ul { display: block; } #menu a { color: inherit; display: block; padding: 1.5em 1.2em; text-decoration: none; } #menu ul { display: none; position: absolute; top: 100%; left: 0; white-space: nowrap; } #menu ul li { float: none; } /*]]>*/ </style> </head> <body> <ul id="menu"> <li><a href= "http://louismartinturgeon.com/sasa/?page_id=12">Accueil</a></li> <li> <a href="http://louismartinturgeon.com/sasa/?page_id=14">Fondation Sassa</a> <ul> <li><a href="http://louismartinturgeon.com/sasa/?page_id=16">Qui sommes nous?</a></li> <li><a href= "http://louismartinturgeon.com/sasa/?page_id=18">Historique</a></li> <li><a href= "http://louismartinturgeon.com/sasa/?page_id=20">Philosophie de la Fondation</a></li> <li><a href= "http://louismartinturgeon.com/sasa/?page_id=22">Organigramme</a></li> </ul> </li> <li><a href= "http://louismartinturgeon.com/sasa/?page_id=24">Documents</a></li> </ul> <p>Some content immediately below the nav menu</p> </body> </html>
cheers,
gary
Wed, 2013-08-07 14:41
#4
Thanks Gary
Thank you Gary, I will try this and get back to you. 
Wed, 2013-08-07 15:15
#5
Solved
Gary and all others who would experience a similar issue,
The key comment from Gary was 'The problem lay with there being a structural space between the li and its dropdown ul.'
I did not need your code Gary... Sorry 
All I did was this:
It seems like somewhere in my code there laid 5px margin between the menu and its submenu ul.
So I simply created a ul li:hover ul with margin-top: -5px and padding-top: 5px.
margin-top: -5px brought back my submenu ul to touch the menu ul and padding-top: 5px pushed the first Li 5px down. Voilà!
Thank you Gary and may this help others who have the same issue!