28114 sujets

CSS et mise en forme, CSS3

Problème de menu déroulant CSS sous Chrome pseudo-classe :hover

Bonjour à tous,

Le code ci-dessous correspond à un menu déroulant CSS basé sur la pseudo-classe :hover des éléments LI. Au survol des li.sub, le contenu du descendant div.menu_item est affiché et reste affiché au passage de la souris au dessus du contenu.

Ceci fonctionne sous FF 3.6, IE7, IE8 mais pas sous Chrome pour le dernier élément de menu, qui contient un select multiple. Sous Chrome 9.0, le passage de la souris au dessus des éléments option ferme le sous-menu. En supprimant la sélection multiple du select, je n'ai plus ce problème. Si le select ne contient aucune option, pas de problème.

Quelqu'un a t'il déjà rencontré ce problème ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Chrome options test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">
.dynamicCssMenu li {
	display: inline ;
	float:left; 
	position:relative;
}

.dynamicCssMenu li.sub .dropdown{
height: 30px; border: 1px solid gray ; border-right : 0px; 
}

.dynamicCssMenu > li  > ul {
top:21px; 
left:-32px;
text-decoration:none; 
border:0;
}

.dynamicCssMenu > li > .banner_item
{
	display:none; position:absolute; top:30px; left:0; height:0; overflow:hidden;
}

/** Affichage des éléments du menu */
.dynamicCssMenu > li:hover  > .banner_item
{
	display:block;height:auto; position:absolute; left: auto; background:#fff; border:1px solid gray; overflow:visible; border-top: 0px; 
}
</style>

</head>
	<body>
		<ul class="dynamicCssMenu">
		<li class="sub"><div class="dropdown">Menu 1</div>
		  <div class="banner_item">
		    <ul>
		      <li>item 1</li>
		      <li>item 2</li>
		      <li>item 3</li>
		    </ul>
		  </div>
		</li>
		<li class="sub"><div class="dropdown">Menu 2</div>
		  <div class="banner_item">
		    <form action="#">
		      <div>
		      <input type="text" value="test"/>
		      </div>
		    </form>
		  </div>
		</li>
		<li class="sub"><div class="dropdown">Menu 3</div>
		  <div class="banner_item">
		    <form action="#">
		      <div>
		      <select multiple="multiple">
			<option value="one">one</option>
			<option value="two">two</option>
			<option value="three">three</option>
		      </select>
		      </div>
		    </form>
		  </div>
		</li>
		</ul>
	</body>
</html>
Bonjour,
Effectivement je confirme, le problème est bien réel.

J'ai tenté une version JavaScript afin de voir si le comportement était similaire, mais ce n'est pas le cas...
En JavaScript, la remonté de l'évènement arrive bien jusqu'au LI, ce qui ne semble pas être le cas dans la version CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <style type="text/css">
      ul { list-style: none; margin: 0; padding: 0; }
      ul li { border: 1px solid black; border-width: 0 1px 1px 0; float: left; padding: 0 .5em; position: relative; }
      ul li ul { display: none; position: absolute; white-space: nowrap; }
      ul li ul li { border-width: 0 1px 1px; float: none; }

      /* décommenter pour tester la version CSS*/
      /* ul li:hover ul { display: block; } */
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script type="text/javascript">
      $(function () {

        /* commenter pour tester la version CSS */
        $('ul li').hover( function () { $(this).children('ul').show(); }, function () { $(this).children('ul').hide(); } );
      });
    </script>
  </head>
  <body>
    <ul>
      <li>
        Menu 1
        <ul><li>Sous Menu 1.1</li><li>Sous Menu 1.2</li><li>Sous Menu 1.3</li><li>Sous Menu 1.4</li></ul>
      </li>
      <li>
        Menu 2
        <ul><li><select multiple="multiple"><option>Option 1</option><option>Option 2</option></select></li></ul>
      </li>
    </ul>
  </body>
</html>

Le problème est identique sous Safari, Chrome 2, 3... Smiley decu
Mais par contre sa fonctionne très bien sous Chrome 1. Smiley ohwell
Sujet clos
Aller à