28172 sujets

CSS et mise en forme, CSS3

Menu vertical probleme developpement niveaux inférieurs

Bonjour à tous .
Voila je travaille actuellement sur un menu vertical déroulant.
Jusqu'ici tout va bien excepté lorsque je veux rajouter un 3 eme niveau de menu.

Le probleme: le 3eme niveau s'affiche directement sans que l'on est à survoler le niveau 2 pour qu'il apparaisse..

Exemple: http://boxop.biz/menu

Le tout est disponible ici : --> http://boxop.biz/menu.rar

Comment corriger ce probleme svp?
Merci d'avance.

Mon code HTML:

<!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" dir="ltr" lang="en"><head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<meta name="description" content="Computer tips, tricks en tutorials voor de gevorderde computer gebruikers." />
<meta name="keywords" content="computerfaq, leren, handleidingen, programmeren, php, webdevlopment, scripting, handleidingen" />
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/dropmenu.js"></script> 
<script>
$(document).ready(function(){
	$("#nav-one").dropmenu({openAnimation: "size",
							closeAnimation: "size"});
});
</script>


<link rel="stylesheet" id="smthemenewprint-css"  href="style.css" type="text/css" />
</head>

<body>

<ul id="nav-one" class="dropmenu"> 
			<li> 
				<a href="#item1" id="accueil">ACCUEIL</a> 
			</li> 
			<li> 
				<a href="#">niveau1</a> 
				<ul> 
					<li><a href="#">niveau2A</a></li> 
					<li><a href="#">niveau2B</a></li> 
					<li><a href="#">niveau2C</a></li>
				</ul> 
			</li> 
            
            
            
            <li><a href="#">niveau1</a>
  <ul>
  <li><a href="#">niveau2A</a></li>
  <li>
  <a href="#">niveau2B</a>
    <ul>
    <li><a href="#">niveau3A</a></li> 
	<li><a href="#">niveau3B</a></li> 
  </ul>
   
  </li>
</ul>
</li>
                   
            
            
		
            

    <li>                      	 
				<a href="#" id="commande">COMMANDE </a> 
				
			</li> 
            

            
		</ul> 
</html>



Mon code CSS:

body {
	background:#c0b099 none repeat scroll 0 0;
	color:#c0b099;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size: 12px;
}
ul.dropmenu{
	position: relative;
	margin: 0px;
	padding: 1px 0px 0px 0px;
	display:block;
	font-family:Verdana,Arial Black,Arial,Helvetica,sans-serif;
	font-size: 12px;
}
.dropmenu li{
	position: relative;
	list-style: none;
	margin: 0px;
	padding: 1px;
	width: 150px;
	display: block;
	cursor: point;
}
.dropmenu li a{
	padding: 10px 30px 9px 15px;
	display: block;
	cursor: point;
	color: #595959;
	text-decoration: none;
	background-color: #fff;
	font-weight: bold;


}
.dropmenu li a:hover{
	background-color: #FFD53A; /*#d5c8b5 beige foncé*/
	color: #38322D;
		
}
.dropmenu li span{
	display: block;
	float: right;
	height: 10px;
	width: 10px;
	background:transparent url(images/plus.png) repeat-x scroll 0 0;
	position: absolute;
	top: 13px;
	right: 10px;
}



.dropmenu li:hover ul, .dropmenu li:hover div{
	display: block;
}
.dropmenu ul, .dropmenu div{
	position: absolute;
	display: none;
	width: 162px;
	left: 155px;
	top: 0px;
	margin: 0px;
	padding: 0px;
}
.dropmenu li div ul{
	border: none;
	background: none;
	position: relative;
	display: block;
	left: 0px;
}
.dropmenu ul li{
	border: 0;
	float: none;
	width: 160px;
}

.dropmenu div ul{
	position: relative;
	display: block;
}
.dropmenu li div{
	background-color: #cccccc;
	padding: 5px;
	display: none;
	position: absolute;
}

#commande{
	background-color:#97bf0d;	
	color:#FFF;
}

#accueil{
	background-color:#e9e3d9;
	}
Sujet clos
Aller à