5 replies [Last post]
TheCSSApprentice
TheCSSApprentice's picture
Offline
newbie
Canada
Last seen: 7 years 10 weeks ago
Canada
Timezone: GMT-4
Joined: 2013-04-15
Posts: 9
Points: 12

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;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

TheCSSApprentice
TheCSSApprentice's picture
Offline
newbie
Canada
Last seen: 7 years 10 weeks ago
Canada
Timezone: GMT-4
Joined: 2013-04-15
Posts: 9
Points: 12

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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. Smile

<!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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

TheCSSApprentice
TheCSSApprentice's picture
Offline
newbie
Canada
Last seen: 7 years 10 weeks ago
Canada
Timezone: GMT-4
Joined: 2013-04-15
Posts: 9
Points: 12

Thanks Gary

Thank you Gary, I will try this and get back to you. Laughing out loud

TheCSSApprentice
TheCSSApprentice's picture
Offline
newbie
Canada
Last seen: 7 years 10 weeks ago
Canada
Timezone: GMT-4
Joined: 2013-04-15
Posts: 9
Points: 12

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 Tongue

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!