Menu CSS sans javascript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Menu CSS sans javascript

josiasseb

Hello

je souhaiterais faire un menu du même genre que celui de ce site
http://mafft.cbrc.jp/alignment/server/
avec en plus un sous-menu qui apparait lorsque la souris passe au-dessus des sous-catégories.
Le tout, sans javascript.

Voici ce que j'ai pour l'instant.
Tout s'affiche comme prévu, sauf que le sous-menu n'apparait pas lorsque la souris passe sur "Translate ..."

Code :

<div id='left_menu'>
<div id="menu">
<div class='category'>Query</div>
<div class='sub_category'><a href="#">Search ...</a></div>
<div class='sub_category'><a href="/cgi-bin/truc">Motif Scan</a></div>
<div class='sub_category'><a href="#">Translate ...</a>
<ul>
<li><a href="/cgi-bin/bidule">Translator</a></li>
<li><a href="/cgi-bin/machin">Translatoror</a></li>
</ul>
</div>
<div class='sub_category'><a href="#">Tools ...</a></div><br>
<div class='category'>Hub</div>
</div>
</div>

Code :

#menu{
width: 100%;
position: relative;
text-align: left;
z-index: 100;
}
.category{
font-size: 20px;
font-weight: bold;
padding: 0 5px 0 33px;
color: #66cdaa;
}
.sub_category{
font-size: 18px;
font-weight: normal;
padding-left: 68px;
color: #66cdaa;
list-style-type: none;
z-index: 100;
}
.sub_category a{
text-decoration: none;
color: #66cdaa;
}
.sub_category a:hover {
color: #FFF;
}
.sub_category ul {
display: none;
position: absolute;
}
.sub_category a:hover ul{
display: block;
height: auto;
z-index: 1000;
}

Une idée ?

Merci

Publicité

bingojm

Salut,

Si j'ai bien compris, voilà ce que tu cherches:http://www.commentcamarche.net/for [...] ti-niveaux

josiasseb

Merci

Je me suis inspiré de ce lien et ça fonctionne.
Je mets tout en place et ne restera plus qu'à tester tout ça sous les différents navigateurs.

encore merci

abais

Meme si t'as trouvé la solution, ton problème était que le <ul> que tu visais (pour le display:block) n'existe pas en tant que tel...
Ce dernier est le frère du <a> et non un descendant...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

josiasseb

C'est bien ce que j'avais vu.

J'ai mis mes liens dans un autre ul li et je peux les atteindre avec
.sub_category ul a:hover ul

FORUM HardWare.fr

Programmation

HTML/CSS

Menu CSS sans javascript

Sujets relatifs
Bloc qui descend légérement [CSS]	Ajouter des cases dans un tableau en javascript
[RESOLU] [javascript] recharger une fenetre (grand) parent	[RESOLU] Problème tableau php -> javascript
Tuto pour faire un menu horizontal en CSS	Aide pour création menu javascript / CSS
menu vertical CSS javascript	Menu (CSS + php/javascript)
[JS] Créer un menu transparent en javascript plutot qu'avec des css	Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.
Plus de sujets relatifs à : Menu CSS sans javascript

Page générée en 0.066 secondes