Espace et avis

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

En gros je fais un exercice en javascript mais j'ai un problème avec l'html et le css. J'ai fait un menu avec des items. Le dernier a un menu déroulant.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="topbar">
        Logo
    </div>

    <div class="menu">
        <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a><ul class="submenu">
                <li><a href="#">Choix</a></li>
                <li><a href="#">Choix</a></li>
                <li><a href="#">Choix</a></li>
            </ul></li>
        </ul>
    </div>

    <div style="height: 4400px;">
        Du Texte
    </div>

<script src="script.js"></script>
</body>
</html>

CSS

body{
    padding: 15px;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

.menu a:hover{
    background: lightgray;
    color:white
}


.topbar{
    border: solid 1px gray;
    border-bottom: none;
    margin: 0;
    padding: 15px;
    font-size: 20px;
    font-weight: 600;
}

.menu{
    border: solid 1px gray;
}

.menu > ul {
    padding: 0;
    margin: 0;
}
.submenu{
    display: none;
}

.menu li{
    list-style-type: none;
}

.menu > ul > li > a{
    border-right: solid 1px gray;
    display: inline-block;
    text-decoration: none;
    padding: 15px 30px;
    color: gray;
}


.menu > ul > li{
    float: left;
    position: relative;
}

.menu::after {
    content: "";
    display: block;
    clear: both;
}

.menu li:hover .submenu {
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 100;
}

.submenu{
    padding: 0;
}

.submenu li{
    display: block;
    margin-left: -0.5px;
}

.submenu a{
    display: block;
    text-decoration: none;
    margin: 0;
    color: gray;
    border: gray 1px solid;
    border-top: none;
    width: 91px;
    line-height: 50px;
    text-align: center;

}

Ce que je veux

Je veux avoir le background des mes items remplit de gris quand je passe dessus avec la souris. Je me demandais quelqu'un pouvait aussi me donner un avis sur le code et comment l'améliorer. Je suis ouvert à toutes crititques.