Répondre à : CSS – personalisation – menu secondaire – sous menus de ce dernier

Présentation du Kit Web du CNRS Forums Utilisation du Kit Web CNRS CSS – personalisation – menu secondaire – sous menus de ce dernier Répondre à : CSS – personalisation – menu secondaire – sous menus de ce dernier

#1111
Seguinot Christophe
Participant

Bonjour

Pour modifier le css, j’utilise du css personnaliser à renseigner sur la page: apparence/CSS PErsonalisé
J’ai modifié les menus pour pouvoir utiliser plusieurs niveaux, et les sous menu à droite de leur parent. Le résultat n’est pas optimal et mériterait une amélioration pour un usage au delà de 2 niveaux.

Cordialement

/* Secondary menu
Modified for using multi level menus
TODO when using too much levels, last sub levels extand outside window !!
TODO check Language switcher when using several languages
*/

ul.sub-menu {
width: 150px;
font-size:15px;
}

header.site-header #site-header-menu nav#secondary-navigation .sub-menu li > a
{
font-size:15px;
}

/* impose fixed width for sub menu items (not for 1st level items)*/

.main-navigation ul ul li > ul {
left: -999em;
right: auto;
}

/* put Second level menu left aligned to its parent */

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus > ul {
left: 25px;
}

/* put sub menu toggled item to the right of their parent */

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li:focus > ul {
left: 150px;
}

/* Change ^ character orientation from +90 to -90 deg*/

.main-navigation ul ul .menu-item-has-children > a:after {
right: 0.5625em;
top: 0.875em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}

a:hover:after {
font-weight: bolder;
}

header.site-header #site-header-menu ul li:last-of-type a {
padding: 0 25px 0 25px;
}

header.site-header #site-header-menu ul li:first-of-type a {
padding: 0 25px 0 25px;
}

.secondary-menu .menu-item-has-children > a::after {
right: 0px !important;
}

.main-navigation ul ul li {
background-color: #f5f5f5;
}

.main-navigation ul ul li a {
width: auto;
padding: 0 25px 0 5px !important;
}

.main-navigation ul ul::after {
content: none;
}