menu horizontal déroulant
J'ai créer ce code pour faire un menu déroulant seulement voilà il fonctionne mais il ne propose que des catégories et des menu. Moi j'aimerai que l'on modifie pour qu'on puisse fais catégorie, menu, sous menu, sous sous menu, ...
Comment dois-je faire ?
Merci de modifier le code comme il est présenter
- Code: Tout sélectionner
<style type="text/css">
body
{
font-family: Tahoma;
font-size: 14px;
overflow: auto;
padding: 0px;
margin: 0px;
}
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li a
{
padding-right: 0px;padding-top: 0px;
}
div.menu
{
position: absolute;
z-index: 3;
width:855px;
height:30px;
}
.menu li
{
width: 171px;
float: left;
}
.menu a
{
border: 1px solid #FF6600;
background-image: url(http://www.easy-upload.net/fichiers/Bouton1.200974163526.jpg);
text-decoration: none;
text-align: center;
cursor: pointer;
margin: 0px;
display: block;
height: 30px;
color: #FF6600;
}
.menu a:hover
{
font-size: 14px;
color: #FF6600;
font-family: Tahoma;
height: 30px;
font-weight:100;
margin: 0px;
background-image: url(http://www.easy-upload.net/fichiers/Bouton23.200974163617.jpg);
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
cursor: pointer;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
border-top: 0px;
font-size: 14px;
cursor: pointer;
}
<style>
#menu li ul {
position:absolute;
}</style><script type="text/javascript">
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
</script>
<div class="menu">
<ul>
<li><a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="page.php">Menu1</a>
<ul id="smenu1" onmouseout="cache('smenu1');" onmouseover="montre('smenu1');">
<li><a href="Page.php">Titre 1</a></li>
<li><a href="Page.php">Titre 2</a></li>
<li><a href="Page.php">Titre 3</a></li>
<li><a href="Page.php">Titre 4</a></li>
<li><a href="Page.php">Titre 5</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="page.php">Menu 2</a>
<ul id="smenu2" onmouseout="cache('smenu2');" onmouseover="montre('smenu2');">
<li><a href="Page.php">Titre 1</a></li>
<li><a href="Page.php">Titre 2</a></li>
<li><a href="Page.php">Titre 3</a></li>
<li><a href="Page.php">Titre 4</a></li>
<li><a href="Page.php">Titre 5</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu3');" onmouseover="montre('smenu3');" href="page.php">Menu 3</a>
<ul id="smenu3" onmouseout="cache('smenu3');" onmouseover="montre('smenu3');">
<li><a href="Page.php">Titre 1</a></li>
<li><a href="Page.php">Titre 2</a></li>
<li><a href="Page.php">Titre 3</a></li>
<li><a href="Page.php">Titre 4</a></li>
<li><a href="Page.php">Titre 5</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu4');" onmouseover="montre('smenu4');" href="Page.php">Menu 4</a>
<ul id="smenu4" onmouseout="cache('smenu4');" onmouseover="montre('smenu4');">
<li><a href="Page.php">Titre 1</a></li>
<li><a href="Page.php">Titre 2</a></li>
<li><a href="Page.php">Titre 3</a></li>
<li><a href="Page.php">Titre 4</a></li>
<li><a href="Page.php">Titre 5</a></li>
</ul>
</li>
<li><a onmouseout="cache('smenu5');" onmouseover="montre('smenu5');" href="Page.php">Menu 5</a>
<ul id="smenu2" onmouseout="cache('smenu5');" onmouseover="montre('smenu5');">
<li><a href="Page.php">Titre 1</a></li>
<li><a href="Page.php">Titre 2</a></li>
<li><a href="Page.php">Titre 3</a></li>
<li><a href="Page.php">Titre 4</a></li>
<li><a href="Page.php">Titre 5</a></li>
</ul>
</li>
</ul>
</div>
