8768 sujets

Développement web côté serveur, CMS

Bonjour,

Via Wordpress, j'ai créée un menu déroulant qui se présente de cette manière du côté PHP (dans mon fichier header.php :

<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'coucou' ); ?></button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav>


Et mon css :

.main-navigation {
    clear: both;
    display: block;
    float: center;
    width: 100%;
    height: 50px; 
    text-transform: uppercase;
    font-size: 80%; 
}

.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;
    padding-left: 0;
    padding-top: 15px;   
}

.main-navigation li {
    float: left;
    position: relative;
    margin-left: 10px;
    margin-right: 10px; 
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

.main-navigation ul ul {
	width: 150px;
	padding-top: 10px;
	background-color: #FFFFFF; 
        float: left;
        position: absolute;
       top: 1.5em;
       left: -999em;
       z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
    width: 150px;
}

.main-navigation ul ul li {
}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
	backgroun d-color: #F2F2F2;
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {	
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {	
}

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

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}



Afin de créer un espacement entre le nom de mes catégories, j'ai ajouté un margin left et right dans .main-navigation li, par conséquent mes sous catégories de menu sont décalées. Comment y remédier ? Merci pour votre aide !