Menu deroulant style css

Marsh Posté le 09-05-2012 à 18:07:51

Bonjour

je suis actuellement en train de créer un site wordpress.
Et j'ai une petite question concernant un problème de style css.

Avant tout voici à quoi ressemble mon menu actuellement:

Et voici une illustration de mon problème.

Je souhaiterai que la ligne fine orange ne fonctionne au survol, que sur les titres principaux.
un autre design sera appliqué au sous et sous sous menu.

Je ne sais pas trop comment gérer les .class parent enfant pour réaliser l'effet désiré.

Est il possible d'exclure la class .children d'une autre class? par ex "#menu li.page_item :hover"

Comment sélectionner les <li> de premier niveau uniquement ?
Sachan qu'avec

Code :

#menu li.page_item :hover

J'agis sur tous les niveaux. ou alors comment puis je rajouter des .class intermédiaire.?

Merci d'avance pour les réponses.

voici mon code:

mon header.php

Code :

<header id="branding" role="banner">
<ul id="menu" class="pagenav">
<li><a href="<?php echo get_option('home'); ?>/" class="on">HOME</a></li>
<?php wp_list_pages('title_li='); ?>
</ul>
</header>

le résultat

Code :

<header id="branding" role="banner">
<ul id="menu" class="pagenav">
<li><a href="http://localhost/wordpress/" class="on">HOME</a></li>
<li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2">PAGE EXEMPLE</a></li>
<li class="page_item page-item-17"><a href="http://localhost/wordpress/?page_id=17">PAGE EXEMPLE2</a></li>
<li class="page_item page-item-20"><a href="http://localhost/wordpress/?page_id=20">PAGE EXEMPLE3</a>
<ul class='children'>
<li class="page_item page-item-23"><a href="http://localhost/wordpress/?page_id=23">SOUS PAGE</a></li>
<li class="page_item page-item-26"><a href="http://localhost/wordpress/?page_id=26">SOUS PAGE2</a>
<ul class='children'>
<li class="page_item page-item-32"><a href="http://localhost/wordpress/?page_id=32">SOUS SOUS PAGE</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</header>

style.css

Code :

#menu li.page_item :hover /* Lorsque la souris passe sur le parent */
{
border-bottom: 3px solid #ff8738;
}
#menu .children a:hover /* Lorsque la souris passe sur une sous page */
{
background:url("images/hover_active.png" );
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#menu a:active{
background:url("images/hover_active_lum.png" ); /* design au clique souris*/
}
.current_page_item a, #home .on {
background:url("images/hover_active.png" ); /* design page active */
text-decoration:none
}

Message édité par Sp@ds le 09-05-2012 à 21:42:25

Reply

Marsh Posté le 09-05-2012 à 18:07:51

Reply

Marsh Posté le 10-05-2012 à 06:39:07

Salut,

#menu > li :hover

> ne ciblera que les li qui sont directement enfants de #menu, ceux que tu veux donc.

Mais les questions de design qui portent sur le code ça va dans le forum Prog

Reply

Marsh Posté le 10-05-2012 à 09:50:25

dans le premier menu li faut pas rajouter la classe pour limiter le border bottom a celui ci?

je pense que le probleme se situe dans le fait ou tu ne precise pas les classes des li dans le CSS

bon en meme temps c'est pas ma specialité :jap:

---------------
Je sais que je plais pas à tout le monde... mais quand je vois à qui je plais pas... je me demande si ça me dérange vraiment

Reply

Marsh Posté le 10-05-2012 à 11:50:43

Merci skopos cela fonctionne.

Reply

Menu deroulant style css

Sujets relatifs:

Leave a Replay