Forum : Probleme sur menu déroulant (css)

Bonjour,

Je rencontre actuellement un probleme avec mon css, le css de nav n'est pas pris en compte quelqu'un aurait-il une solution?

Voici mon code HTML :

<!DOCTYPE html> <html> <head> <title>Page de menu</title> <link rel="stylesheet" href="Style.css"> <meta chardet="utf-8"> </head> <body> <nav> <ul> <li class="menu-1"><a href="#####">#####</a> <ul class="submenu"> <li><a href="###">######</a></li> <li><a href="###">######</a></li> <li><a href="###">######</a></li> <li><a href="###">######</a></li> </ul> </li> <li class="menu-2"><a href="#####">#####</a> <ul class="submenu"> <li><a href="###">######</a></li> <li><a href="###">######</a></li> <li><a href="###">######</a></li> <li><a href="###">######</a></li> </ul> </li> <li class="menu-3"><a href="#####">#####</a> <ul class="submenu"> <li><a href="###">######</a></li> <li><a href="###">######</a></li> <li><a href="###">######</a></li> <li><a href="###">######</a></li> </ul> </li> <li class="menu-4"><a href="#####">#####</a></li> </ul> </nav> </body> </html>

Mon code CSS :

body{ font-family:'Source code pro', Calibri, serif; margin: 0px; padding: 0px; } nav{ width: 100%; background-color: #424558; } nav > ul{ margin: 0px; padding: 0px; } nav > ul::after{ content:""; diplay:block; clear:both; } nav > ul > li{ float: left; position: relative; } nav > ul > li > a{ padding: 20px 30px; color:black; } nav li{ list-style-type: none; } .submenu{ display:none; } nav a{ display:inline-block; text-decoration: none; } nav li:hover .submenu{ display: inline-block; position: absolute; top:100%; left: 0px; padding: 0px; z-index: 100000; } .submenu li{ border-bottom:1px solid #CCC; } .submenu li a{ padding: 15px 30px; font-size:13px; color: #222538; width: 270px; } .menu-1:hover{ border-top:5px solid #e44d26; background-color: rgba(228, 77, 38, 0.15); } .menu-2:hover{ border-top : 5px solid #0070bb; background-color: rgba (000, 112, 192, 0.15); } .menu-3:hover{ border-top: 5px solid #f1dc4f; background-color: rgba(241, 211, 79, 0.15); } .menu-4:hover{ border-top : 5px solid #BBB; background-color: rgba(220, 220, 200, 0.15); } nav > ul > li:hover a{ padding: 15px 30px 20px 30px; }

Probleme sur menu déroulant (css)

8 réponses