28172 sujets

CSS et mise en forme, CSS3

MENU CSS - Une meilleure solution ?

Bonjour à tous,

j'ai mis en forme le menu principal en CSS. J'aurais aimé avoir vos avis quant à la façon de coder ce dernier.
En effet je pense que je m'y suis mal pris même si j'arrive au résultat voulu

N'y-a-t'il pas un moyen de simplifier cela ?

http://site.lyceelaviste.fr/index.php/article-test/article-test-2/article-test-3/article-test-4/article-test-5

.moduletable_menu{
    clear: both;
    text-decoration: none ;  
    padding-left: 5px ;
    padding-right: 5px ;
    
}
.moduletable_menu a{
    text-decoration: none ;   
    color : #141D29 ;
}

.moduletable_menu > h3{
    font-family: 'Droid Sans', sans-serif;
    font-weight: 400;
    color: #141d29;
    margin-bottom: 6px;
    text-align: center ;
}
/*Menu niveau 0*/
.moduletable_menu > ul > li { 
    border-bottom: 1px solid #E2E2E2;
    border-left: 3px solid transparent;
}
.moduletable_menu > ul > li:hover { 
    border-left: 3px solid #0099dc ;
}
/*Menu niveau 1*/
.moduletable_menu > ul > li > ul > li { 
    background-color: #E2E2E2;
}
/*Menu niveau 2*/
.moduletable_menu > ul > li > ul > li > ul > li > a:before{ 
    padding-left : 5px; 
    content:url(../images/puce_menu.png);
}


Merci

Nicolas
Merci de ta réponse
La structure HTML du menu n'est pas modifiable car je passe par un CMS

Je voudrais savoir si il y a une manière plus propre de chercher les éléments enfants ?
/*Menu niveau 2*/
.moduletable_menu > ul > li > ul > li > ul > li > a:before{ 
    padding-left : 5px; 
    content:url(../images/puce_menu.png);
}
Pour ma part je conseillerai d'appliquer des classes sur les éléments de ton menu (ul, li, a) selon leur position dans le menu. C'est beaucoup plus performant, réutilisable et simple à maintenir.

exemple : ul.menu, li.m-item, a.m-anchor puis ul.submenu, li.sm-item, a.sm-anchor et ainsi de suite.
Sujet clos
Aller à