Bonjour à tous ! avant de passer sur le salon de présentation, je vous fais part d'un soucis qui m'embête un brin ^^
J'ai trouvé un tutoriel (oui, bon, pas chez Alsa, mais le monsieur qui l'a fait se référe souvent à vous
), donc j'ai trouvé un tuto pour faire un menu déroulant horizontal en css et js à trois niveaux. Mais il bug méchamment sur opéra 
Si quelqu'un aurait le temps de regarder mon code css ainsi que mon code html, ça pourrait m'enlever une sacrée épine du pied ! Mais attention, je dis "si quelqu'un aurait le temps" paske au possible, si mon/ma sauveur(veuse) pouvait un peu m'expliquer son raisonnement, ça serait chou
histoire que je ne me couche pas trop c*n ce soir 
NB : le bug sous Opéra, c'est que les menus et sous menus ne disparaissent pas après le passage de la souris :-S
donc bon...
voilà mon CSS :
et voilà le code de ma page HTML :
Merci d'avance
[/i][/i]
Modifié par UFT-8 (13 Nov 2007 - 14:26)
J'ai trouvé un tutoriel (oui, bon, pas chez Alsa, mais le monsieur qui l'a fait se référe souvent à vous
), donc j'ai trouvé un tuto pour faire un menu déroulant horizontal en css et js à trois niveaux. Mais il bug méchamment sur opéra Si quelqu'un aurait le temps de regarder mon code css ainsi que mon code html, ça pourrait m'enlever une sacrée épine du pied ! Mais attention, je dis "si quelqu'un aurait le temps" paske au possible, si mon/ma sauveur(veuse) pouvait un peu m'expliquer son raisonnement, ça serait chou
histoire que je ne me couche pas trop c*n ce soir NB : le bug sous Opéra, c'est que les menus et sous menus ne disparaissent pas après le passage de la souris :-S
donc bon...
voilà mon CSS :
body{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
#container {
width: 1000px;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 1000px;
list-style:none;
line-height: 1;
background: #FFFFFF;
padding: 0;
border: solid #8AA0FF;
border-width: 2px;
margin: 0em 0 2em 0;
}
#nav a {
display: block;
width: 7em;
w\idth: 7em;
text-decoration: none;
padding: 0.25em 2em;
}
/*Mise en place des flêches*/
#nav a.daddy {
background: url(rightarrow2.gif) center no-repeat;
padding-right:15em;
}
#nav a.daddy2{
background: url(downarrow2.gif) center right no-repeat;
padding-right:10%;
}
/*-----------------------------*/
/*Taille occupée par les titres des menus principaux*/
#nav li {
float: left;
padding: 0;
width: 10em;
background-color:#FFFFFF;
}
/*Apparence globale des menus déroulants*/
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14em;
w\idth: 14em;
border-width: 0.25em 0.25em 0.25em 0.25em;
margin: 0;
}
/*Taille et place occupée par le rollON*/
#nav li li {
padding-right: 1em;
width: 13em;
}
/*Taille des cadres du menu déroulant*/
#nav li ul a {
width: 13em;
w\idth: 9em;
}
/*Niveau d'apparition des sous-sous menus*/
#nav li ul ul {
margin: -30px 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background:#8AA0FF;
}et voilà le code de ma page 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<link href="index2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="#">Accueil</a></li>
<li><a href="#" class="daddy2">Société</a>
<ul>
<li><a href="#nogo">Notre activité</a></li>
<li><a href="#nogo">Notre savoir-faire</a></li>
<li><a href="#nogo">Notre politique Qualité</a></li>
<li><a href="#nogo">Notre réseau commercial</a></li>
</ul>
</li>
<li><a href="#" class="daddy2">Produits</a>
<ul>
<li><a href="#" class="daddy">Chirurgie de la cataracte</a>
<ul>
<li><a href="#nogo">Implants</a></li>
<li><a href="#nogo">Visqueux</a></li>
<li><a href="#nogo">Anneaux</a></li>
<li><a href="#nogo">Injecteurs/cartouches</a></li>
<li><a href="#nogo">Clous</a></li>
</ul></li>
<li><a href="#" class="daddy">Laser (applications en...)</a>
<ul>
<li><a href="#nogo">Presbytie</a></li>
<li><a href="#nogo">Réfractive</a></li>
<li><a href="#nogo">Cataracte</a></li>
<li><a href="#nogo">Glaucome</a></li>
<li><a href="#nogo">Rétine</a></li>
</ul></li>
<li><a href="#" class="daddy">Matériels</a>
<ul>
<li><a href="#nogo">Station réfractive</a></li>
<li><a href="#nogo">Topographe</a></li>
<li><a href="#nogo">Epikératome</a></li>
</ul></li></ul>
<li><a href="#" class="daddy2">Le Multisite</a>
<ul>
<li><a href="#nogo">Le Multisite, pourquoi ?</a></li>
<li><a href="#nogo" class="daddy">Nos choix technologiques</a>
<ul>
<li><a href="#nogo">Laser Excimer Isobeam D200</a></li>
<li><a href="#nogo">Microkératome</a></li>
</ul>
<li><a href="#nogo">Pour en savoir plus</a></li>
</li></ul>
<li><a href="#nogo">Implantations</a></li>
<li><a href="#" class="daddy2">Actualité</a>
<ul>
<li><a href="#nogo">Dernièrement</a></li>
<li><a href="#nogo">Les congrés</a></li>
<li><a href="#nogo">Les offres d'emploi</a></li>
</ul>
</li>
<li><a href="#nogo">Contact</a></li>
<li><a href="#nogo">Liens</a></li>
<li><a href="#nogo">Carte du site</a></li>
</ul>
</div>
</body>
</html>
Merci d'avance
[/i][/i] Modifié par UFT-8 (13 Nov 2007 - 14:26)
je vais observer ça de plus près ! Avec toutes ces balises on s'y perd (enfin, moi... 
)