28172 sujets

CSS et mise en forme, CSS3

Menu CSS et Firefox 4

Bonjour,
Je viens de remarquer que une petit problème avec Firefox 4 et mes Menus déroulant.
- En effet j'ai un "trou"entre le Menu et les sous Menu => Et donc si on glisse lentement la souris du Menu au sous Menu ceux-ci disparaissent.

Dès que j'ai un peu de temps j'essaie de vous mettre un exemple en ligne.

pour le code j'ai un index.
<?php
printf('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'."\n");
printf("<link rel='stylesheet' href='style.css' type='text/css' /> \n");
?>
<?php
printf('<title>Maika</title>
</head>
<body>');
include "menu.php";
printf('</body>
</html>');
?>

Un menu
<div id="menu">
      <ul class="nav">
        <li class="toggleSubMenu">
          <span class="gmenu">Menu1</span> 
          <ul class="subMenu">
            <li>
              <a href="">Sous menu 1</a>      
            </li>
			<li>
              <a href="">Sous menu 2</a>       
            </li>
			<li>
              <a href="">Sous menu 3</a>        
            </li>
			<li>
              <a href="">Sous menu 4</a>        
            </li>                             
          </ul>
        </li>		
		<li>
		</li>
      </ul>
</div>

et un CSS

#menu {
	/*background-color:#474747;*/
	height:1.5em;
	margin-left:2em;
	margin-top:1em;
	vertical-align:top;
}

#menu .nav .gmenu {
	font-family: sans-serif;
	color: #900;
	font-size: 0.9em;
	font-weight:bold;
	font-stretch:condensed;
	}
	
#menu .nav {
	float: left;
	list-style: none;
	line-height: 1;
	padding: 0;
	margin: 0;
	text-align:left;
}

#menu .nav a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: 0em 2em;
	line-height: 1.5;
	 
}

#menu .nav span {
	display: block;
	color: #000;
	text-decoration: none;
	padding: 0.25em 2em;
	 
}

#menu .nav .toggleSubMenu {
	float: left;
	padding: 0;
	width: 8em;
}

#menu .nav .subMenu {
	line-height: 1;
	font-size: 0.8em;
	position: absolute;
	background-color:#DDD;
	list-style: none;
	left: -999em;
	height: auto;
	width: 20em;
	border-width: 0.1em;
	margin: 0;
	padding: 0;
}

#menu li li:hover {
	background-color:#CCC;
}

#menu li li {
	padding-right: 1em;
	width: 19em;
}

#menu .nav .subMenu a {
	width: 19em;
}
#menu .nav .toggleSubMenu:hover ul
{
	left: auto;
}

#menu .nav .toggleSubMenu:hover{
	background-color:#999;
	
}

Ligne 32 (#menu .nav span) du CSS si je change le 0.25 par 0.5 ça marche mais c'est pas ce que je veux.
Ce menu est inspiré de tuto alsacréation entre autres donc je ne maitrise pas tout ce qu'il y a dedans.
Merci
Modifié par maika (17 May 2011 - 11:34)
A chercher à faire simple pour mettre un truc en ligne, j'ai trouvé le point bloquant.
C'est le 
font-size=0.9
dans 
#menu .nav .gmenu
. Si je passe à une taille 1em ça marche mais ce n'est pas ce que je veux.
Des Solutions ?

Merci
Sujet clos
Aller à