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;
}

GlobeVer9

Auteur

Réponse acceptée

J'ai trouvé il manqué height:60px :)

F3LENYR

Réponse acceptée

Attention tu as mis "chardet" au lieu de "charset" dans tes metas xD

MrCastor

Salut,

est-il bien chargé ?

GlobeVer9

Auteur