Bonjour à tous !
Je débute dans la réalisation et le codage de site web et je m'inspire donc de tutos et autres informations disponibles sur la toile, en effet, google est mon ami !
Mon design est inspiré d'un tuto alsa et le code pour le menu déroulant d'un autre site, j'ai donc du tester plusieurs heures pour concilier les deux !
J'ai réussi à mettre en place un menu horizontal déroulant (2 niveaux donc : menu et sous menu)
De nouvelles idées venant, j'ai besoin d'un troisième niveau qui lui, se déroulerait sur la droite du niveau 2.
Ca fait 3 jours que je test plusieurs solutions sans y parvenir !
Je vous joint donc le code xhtml de mon menu, ainsi que le code css en espérant que vous pourrez m'aider.
Pour une question de facilité, je vous ai raccourci le menu et enlevé les "href"
Je n'ai pas mis de décalage lors du déroulement donc la 1ere balise de chaque sous-menu est identique a celle du menu dont il se déroule.
Comme je n'ai pas de "class" et une seule "id" j'ai un peu de mal a m'en sortir...
Modifié par Justaman (09 Jun 2010 - 22:19)
Je débute dans la réalisation et le codage de site web et je m'inspire donc de tutos et autres informations disponibles sur la toile, en effet, google est mon ami !
Mon design est inspiré d'un tuto alsa et le code pour le menu déroulant d'un autre site, j'ai donc du tester plusieurs heures pour concilier les deux !
J'ai réussi à mettre en place un menu horizontal déroulant (2 niveaux donc : menu et sous menu)
De nouvelles idées venant, j'ai besoin d'un troisième niveau qui lui, se déroulerait sur la droite du niveau 2.
Ca fait 3 jours que je test plusieurs solutions sans y parvenir !
Je vous joint donc le code xhtml de mon menu, ainsi que le code css en espérant que vous pourrez m'aider.
<ul id="menu">
<li><a href="index.html">Acceuil</a></li>
<li><a>La team</a>
<ul>
<li><a>La team</a></li>
<li><a>Présentation</a></li>
<li><a>Postuler</a></li>
</ul>
</li>
<li><a href="pilotes.html">Pilotes</a>
<ul>
<li><a>Pilotes</a></li>
<li><a>Tous</a></li>
<li><a>Thomaskook</a></li>
<li><a>ReyMisterio</a></li>
</ul>
</li>
<li>
<a href="index.html">Statistiques</a>
<ul>
<li><a>Statistiques</a></li>
<li><a>Générales</a>
<ul>
<li><a>Générales</a></li>
<li><a>Mai</a></li>
<li><a>Juin</a></li>
</ul>
</li>
<li><a>Par saison</a></li>
<li><a>Par pilote</a></li>
<li><a>Top scores</a></li>
</ul>
</li>
<li><a>Contact</a></li>
<li><a>Aide</a>
<ul>
<li><a>Aide</a></li>
<li><a>Le jeu</a></li>
<li><a>Liens</a></li>
</ul>
</li>
</ul>
Pour une question de facilité, je vous ai raccourci le menu et enlevé les "href"
Je n'ai pas mis de décalage lors du déroulement donc la 1ere balise de chaque sous-menu est identique a celle du menu dont il se déroule.
ul#menu
{
height: 30px ;
width: 770px;
float: left ;
margin: 0 ;
padding: 0 ;
background: url(http://img339.imageshack.us/img339/3439/bgmenuu.jpg) ;
list-style-type: none ;
font-size: 1.2em ;
font-weight: bold ;
color: #fff ;}
ul#menu li
{
float:left;
margin:auto;
padding:0;
background: url(http://img339.imageshack.us/img339/3439/bgmenuu.jpg);
text-align: center ;
list-style-type: none ;}
ul#menu li ul
{display:none;
margin:0;
padding:0;
width: 126px;
position:absolute;}
ul#menu li a
{width: 126px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
text-decoration: none ;
border-right: 1px solid #dea ;
border-left: 1px solid #dea ;
float: left;}
ul#menu li a:hover
{display: block;
background: url(bg_menu2.jpg) ;
border-right: 1px solid white ;
border-left: 1px solid white ;
font-size: 1.4em;
letter-spacing: 1px;}
ul#menu li:hover ul
{display:block;
font-size: 1em ;
font-weight: smaller ;}
Comme je n'ai pas de "class" et une seule "id" j'ai un peu de mal a m'en sortir...
Modifié par Justaman (09 Jun 2010 - 22:19)
)
