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
