Bonsoir,
Je me suis servis de votre exemple sur alsacreations ::> http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
Pour réaliser ce menu vertical là :::> http://edentime.free.fr/new/menuv/menuv.html
Sous firefox il fonctionne impeccablement bien, sous Internet Explorer 7.0 aussi.
Par contre sous Internet explorer 6.0 il bug lors du passage de la souris sur les hover du bas du menu.
Avez vous une piste de réflexion car là je sèche vraiment.
Par avance merci de votre aide.
Je vous joint mon code html de la page menuv.html
Et aussi le code du fichier css menuv.css
En espérant que l'erreur sera simple a trouver....
Si au passage vous avez des suggestions d'améliorations au niveau de la rédaction du fichier html et/ou css je suis preneur de toutes critiques construtives.
Salutations,
Je me suis servis de votre exemple sur alsacreations ::> http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
Pour réaliser ce menu vertical là :::> http://edentime.free.fr/new/menuv/menuv.html
Sous firefox il fonctionne impeccablement bien, sous Internet Explorer 7.0 aussi.
Par contre sous Internet explorer 6.0 il bug lors du passage de la souris sur les hover du bas du menu.
Avez vous une piste de réflexion car là je sèche vraiment.
Par avance merci de votre aide.
Je vous joint mon code html de la page menuv.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu deroulant vertical</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>
<link rel="stylesheet" type="text/css" href="menuv.css" />
</head>
<body>
<dl id="menu">
<dt id="accueil" onclick="javascript:montre();"><a href="#"> </a></dt>
<dt id="mariage" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre(smenu2);" onclick="javascript:montre();"><a href="#"> </a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Eden wedding</a></li>
<li><a href="#">Eden day</a></li>
<li><a href="#">Eden secret</a></li>
</ul>
</dd>
<dt id="particuliers" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre(smenu3);"><a href="#"> </a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Eden events</a></li>
<li><a href="#">Eden naissance</a></li>
<li><a href="#">Amour d'eden</a></li>
</ul>
</dd>
<dt id="professionnels" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre(smenu4);"><a href="#"> </a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Nos engagements</a></li>
<li><a href="#">Association &</a></li>
<li><a href="#">Administration</a></li>
<li><a href="#">Séminaire & soirée</a></li>
<li><a href="#">Incentive</a></li>
<li><a href="#">Team building</a></li>
</ul>
</dd>
<dt id="decorations" onclick="javascript:montre();"><a href="#"> </a></dt>
<dt id="realisations" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre(smenu6);"><a href="#"> </a></dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Année 2007</a></li>
<li><a href="#">Année 2008</a></li>
<li><a href="#">...</a></li>
</ul>
</dd>
<dt id="contact" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre(smenu7);"><a href="#"> </a></dt>
<dd id="smenu7" onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Nous écrire</a></li>
<li><a href="#">Vos témoignages</a></li>
<li><a href="#">Plan d'accé</a></li>
</ul>
</dd>
</dl>
</body>
</html>
Et aussi le code du fichier css menuv.css
body {
margin: 0;
padding: 0;
background-color: #fff;
font: 70% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 10px;
left: 10px;
background-color: #d8261a;
}
dl#menu {
width: 150px;
}
dl#menu dt#accueil {
cursor: pointer;
height: 40px;
background-image: url(img/accueil01.png);
width: 150px;
}
dl#menu dt#mariage {
cursor: pointer;
height: 40px;
background-image: url(img/mariage01.png);
width: 150px;
}
dl#menu dt#particuliers {
cursor: pointer;
height: 40px;
background-image: url(img/particulier01.png);
width: 150px;
}
dl#menu dt#professionnels {
cursor: pointer;
height: 40px;
background-image: url(img/professionnel01.png);
width: 150px;
}
dl#menu dt#decorations {
cursor: pointer;
height: 40px;
background-image: url(img/decorations01.png);
width: 150px;
}
dl#menu dt#realisations {
cursor: pointer;
height: 40px;
background-image: url(img/realisations01.png);
width: 150px;
}
dl#menu dt#contact {
cursor: pointer;
height: 40px;
background-image: url(img/contact01.png);
width: 150px;
}
dl#menu dd {
margin: -1px 0;
}
dl#menu li {
text-align: center;
height: 20px;
}
dl#menu li a, dl#menu dt a {
color: #fff;
text-decoration: none;
display: block;
height: 100%;
}
dl#menu li a:hover {
color: #000;
}
dl#menu dt#accueil a:hover {
background-image: url(img/accueil02.png);
}
dl#menu dt#mariage a:hover {
background-image: url(img/mariage02.png);
}
dl#menu dt#particuliers a:hover {
background-image: url(img/particulier02.png);
}
dl#menu dt#professionnels a:hover {
background-image: url(img/professionnel02.png);
}
dl#menu dt#decorations a:hover {
background-image: url(img/decorations02.png);
}
dl#menu dt#realisations a:hover {
background-image: url(img/realisations02.png);
}
dl#menu dt#contact a:hover {
background-image: url(img/contact02.png);
}
En espérant que l'erreur sera simple a trouver....
Si au passage vous avez des suggestions d'améliorations au niveau de la rédaction du fichier html et/ou css je suis preneur de toutes critiques construtives.
Salutations,