Bon, j'ai créer mon menu avec des sous menus mnt, je veux créer pour les sous menu des sous sous menus
, comment dois je faire ?!
Voila mon code CSS : (menu.css)
body {
margin: 0px;
padding: 0px;
background-color: #F0F0F5;
color: #C1C1C3;
font: 70% verdana;
}
#site {
position: absolute;
margin-right: auto;
margin-left: auto;
padding-right: 10px;
padding-left: 10px;
width: 800px;
top: 3px;
left: 3px;
z-index: 1;
color: #000;
background-color: #F0F0F5;
border: 1px;
}
#header {
height: 100px;
}
#header img {
float: right;
margin: 5px 5px 0 0;
}
#header h1 {
text-indent: -5000px;
margin: 0;
line-height: 0;
}
#header p {
margin: 55px 0 0 290px;
font-weight: bold;
color: white;
font-size: 1.1em;
}
#menuhaut {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0.1em 0.5em 0.1em 0;
list-style-type: none;
background: #C3C3C3;
color: white;
text-align: right;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
color: #F0F0F5;
text-decoration: none;
}
#menuhaut a:hover {
text-decoration: none;
color: #F0F0F5;
}
/* Menus deroulants */
<style type="text/css" media="screen">
dl, dt, dd, ul, li {
margin-top: 0px;
padding: 0px;
list-style-type: none;
}
#menu {
position: absolute; /*placement du menu, à modifier selon vos besoins */
top: 95px;
z-index:10;
margin-left: auto;
margin-right: auto;
width: 800px; /* largeur obligatoire pour être centré */
}
#menu dl {
float: left;
width: 23%;
right: 0px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
border: 0px solid gray;
margin: 0px;
}
#menu dd {
display: none;
border: 1px solid gray;
background: gray;
}
#menuhaut li {
display: inline;
}
#menu li {
text-align: left;
background: #607493;
}
#menu li a, #menu dt a {
color: #F0F0F5;
text-decoration: none;
display: block;
height: 100%;
border: 1px solid gray;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #C1C1C7;
}
-->
</style>
et voila mon code XHTML:
<html>
<head>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<meta name="generator" content="Namo WebEditor v5.0(Trial)">
<link rel="stylesheet" media="screen" type="text/css" title="CSS" href="forme.css" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS" href="cssX.css" />
<link rel="stylesheet" media="screen" type="text/css" title="CSS" href="menu.css" />
<? include("./session/include.php");?>
<body bgcolor="#F0F0F5" text="black" link="#7C7CA4" vlink="#7C7CA4" alink="#7C7CA4">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');">IAM</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<li><a href="utilisateur_ok.php?session=<?echo $session;?>"><font color="white">Mobile</font></a></li>
<li><a href="LiaisonSp.php?session=<?echo $session;?>"><font color="white">Liaison Spécialisée</font></a></li>
<li><a href="fixe.php?session=<?echo $session;?>"><font color="white">FIXE</font></a></li>
<li><a href="prestas.php?session=<?echo $session;?>"><font color="white">Autres prestations</font></a></li>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">TELECOM
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">RECHERCHE
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">PRESTATAIRES</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
</dl>
</div>
