Probleme affichage menu horizontal CSS avec sous-sous menus

bonjour à tous
je suis entrain de me faire la main avec css et html sur un site web fictif

j'ai voulu mettre en place un menu css horizontal avec sous menu, tout ce qu'il y a de plus classique
sauf que ...
l'affichage déconne légèrement, je pense que ça doit pas être grand chose mais je ne trouve pas quoi

<ul>
        	       <li><a href="http://testdentiste.alwaysdata.net">Accueil</a></li>
                      <li><a href="../p/cabinet.php">Le cabinet</a></li>
                       <li><a href="#">Journal</a>
				<ul>
					<li><a href="#">MENU1</a>
								<ul>
									<li><a href="#">TEST1</a></li>
									<li><a href="#"> TEST2</a></li>
				                                  </ul>
					</li>
					<li><a href="#"> MENU2</a>
									<ul>
										<li><a href="#">TEST3</a></li>
										<li><a href="#">TEST4</a></li>
									</ul>
					</li>
				</ul>
			</li>
            <li><a href="../admin/test.php">Admin</a></li>
	    <li><a href="mailto:"#">Nous contacter</a></li>
  </ul>

#nav a:link, a:visited {text-decoration: none;color: #FFF; font-weight:bold;}

#nav ul {padding:0; margin:0; list-style: none; background:grey; height:36px; }
#nav ul li {float:left; position:relative;}
#nav ul li a, ul li a:visited {display:block; color:red; width:104px;height:auto; line-height:20px; padding:10px;text-align:center;}
#nav ul li a:hover {display:block; color:green; background:pink; line-height:16px; padding:10px;}

#nav ul li ul, ul li:hover ul li ul {display: none;     }

#nav ul li:hover ul {display:block; position:absolute;  top:40px; left:0; height:auto; }
#nav ul li:hover ul li a {display:block; text-align:left;  border-bottom:1px solid #FFF;}

#nav ul li:hover ul li:hover ul {display:block; position:absolute; left:130px; top:0;}

les sous sous menus sont visibles au mauvais moment et masque les sous menus
un petit z-index quelque part qui manque ?
Modifié par cyrilou (03 Jun 2014 - 23:58)

salut,
c'est très simple de faire un menu en CSS. Ce ne sont pas les tutos qui manquent. Voici un exemple tout bête.

Comme toi je tatonne dans le code des menus
Regarde ce code qui pourrait t'aider dans ce que tu cherches.
Mon menu avec des sous-sous menus ressemble au tien et fonctionne très bien. ICI
------------

.navbar a {
	text-decoration: none;
	} 

.toggleMenu { /*concerne l'onglet "Menu" pour mobile */
    display:  none;
	background: #b35e0a; /*rouille liens */
    padding: 10px 15px;
	font-weight: bold;
    color: #fff;
}
.navbar {
	margin-top:5px;
	font-weight: bold;
    list-style: none;
     *zoom: 1;
     background:#eaefd2; /*kaki*/
	 border-top:solid 1px #663300;
}
.navbar:before,
.navbar:after {
    content: " "; 
    display: table; 
}
.navbar:after {
    clear: both;
}
.navbar ul {
    list-style: none;
    width: 21.25em; /* = 340px */
}
.navbar a {
   padding: 10px 15px; 
    color:#663300;
}
/* .navbar > li ul > li a:visited { (essai pour distinguer les iens visités)
	color: #999999; /*gris 
	text-decoration: none;
}*/
.navbar li {
    position: relative;
}
.navbar > li {
    float: left;
   	text-align:left;
}
.navbar > li > .parent {
    background-image: url("/imgdivers/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.navbar > li ul li > .parent   {
	background-image: url("/imgdivers/rightArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.navbar > li > a {
    display: block;
}
.navbar li  ul {
    position: absolute;
    left: -9999px;
}
.navbar > li.hover > ul {
    left: 0;
	
}
.navbar li li.hover ul {
    left: 100%;
    top: 0;
}
.navbar li li a { /*sous-menus */
    display: block;
    background: #eaefd2; /*kaki*/
    position: relative;
    z-index:100;
    border: solid thin #663300;
}
.navbar li li li a { /*sous sous-menus */
	width: auto;
	background: #eaefd2; /*kaki*/
	z-index: 200;
	border: solid thin #663300;
}
.navbar ul li a:hover,  ul ul > li a:hover {
	background-color: #eaefd2; /*kaki, concerne les ss-menu*/
	background-color: rgba(174, 92,16, 0.9); /*color rouille ss-menu a/hover */
	color: #fff;
}

Modifié par 6l20 (04 Jun 2014 - 13:16)