@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800); article,aside,figure,footer,header,hgroup,nav,section { display: block; } nav { display: block; background: #000000; /*Bilal background du menu */ text-align:left; width:100%; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 999; border-bottom: 1px solid #ffffff; /*Taille et couleur de la bordure pour chaque colonne*/ } .menu li:first-child { margin-left: 0; } .menu li a { font-size: 0.8em; /* 24 */ /*Bilal taille font des bouton*/ line-height: 2.5em; /* 60 (24) */ text-decoration: none; text-align: center; margin:auto; padding: 0px 10px; /*Bilal padding pour les colonnes du menu*/ display: block; color: #fff; border-left: 0px solid #ffffff; } .menu li a img { max-width: 30px; /*Bilal taille max pour icon img */ } .menu li a:hover,.menu li:hover>a { color: #fff; background: #3C3E42; /*Bilal couleur du hover pour chaque colonne */ } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 170px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } .menu ul li a:hover,.menu ul li:hover>a { background: #9ca3da; color: #fff; } .menu li:hover>ul { visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 169px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } .menu li>ul ul:hover { visibility: visible; opacity: 1; transform: translate(0,0); } /*Bilal Media mobile size */ .responsive-menu { display: none; width: 100%; background: #374147; /*Bilal Fond menu pour mobile*/ color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #ffffff; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #000000; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; } nav { margin: 0; background: none; text-align:left; } .menu li { display: block; margin: 0; } .menu li a { background: #000000; /*Bilal Fond de chaque colonne pour mobile*/ color: #ffffff; text-align:left; } .menu li a:hover,.menu li:hover>a { background: #1E272B; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } .menu li:hover>ul { visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } .menu li>ul ul:hover { transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }