Enlever espace entre <ul> et <li> menu déroulant? par NeilSauvage - page 1

Bonjour,

Je fait un menu déroulant et j'ai un espace entre mon <li> et ma bordure. Cet espace varie selon le qui varie selon le navigateur.

Chrome

sur Firefox l'espace est à gauche et sur IE il n'existe pas.

HTML:

<!DOCTYPE html>
<html lang="fr">

<head>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="page.css">
   <title>Aide aux devoirs</title>
</head>
<body>
<header>
   <div class="milieu">
      <div class="entête">
         <div class="logo_icn"></div>
         <h1>Aide aux devoirs pour lycéens</h1>
         <img class="logo_monod" src="image/logo_monod.png" alt="lycée monod">
      </div>
      <nav>
         <ul>
            <li class="menu_devoirs"><a href="#">Accueil</a></li>
            <li class="menu_devoirs"><a href="#">devoirs</a>
               <ul>
                  <li><a href="#">Mathématique</a></li>
                  <li><a href="#">SVT</a></li>
                  <li><a href="#">Physique</a></li>
                  <li><a href="#">Français</a></li>
               </ul>
            </li>
            <li class="menu_devoirs"><a href="#">Lycée Monod</a></li>
            <li><a href="#">A propos</a></li>
         </ul>
      </nav>
   </div>
</header>
<section>
</section>
</body>
</html>

CSS:

/*Configuration de la page*/
body
{
   margin: 0px;
   padding: 0px;
   background-color: #33C1FF;
}
h1
{
   font-family: verdana;
   margin-top: 60px;
}
/*Création de l'entête*/
header
{
   display: flex;
   height: 100%;
   width: 100%;
   background-color: #33C1FF;
}
.milieu
{
   display: flex;
   flex-direction: column;
   height: 100%;
   margin: auto;
   width: 75%;
   background-color: #FFF633;
}
.entête
{
   padding: 0px 40px;
   display: flex;
   justify-content: space-between;
}
.logo_icn
{
   margin-top: 30px;
   height: 100px;
   width: 100px;
   background-color: white;
   border-radius: 20%;
}
.logo_monod
{
   margin-top: 30px;
   height: 100px;
   width: 100px;
   background-color: white;
   border-radius: 20%;
}
nav
{
   border-top: 1px black solid;
   border-bottom: 1px black solid;
   margin: auto;
   margin-top: 20px;
   width: 100%;
}
nav ul
{
   padding: 0;
   margin: 0;
   display: flex;
}
nav ul li
{
   display: block;
   background-color: #51FF35;
   list-style-type: none;
   line-height: 40px;
   width: 100%;
   height: 40px;
   text-align: center;
}
nav ul li a
{
   display: block;
   color: black;
   text-decoration: none;
   text-transform: uppercase;
   font-family: verdana;
}
nav ul li a:hover
{
   background-color: gray;
}
nav ul li ul li
{
   display: none;
   flex-direction: column;
   z-index: 1;
   border-top: 1px black solid;
}
nav ul li:hover ul li
{
   display:block;
}
nav ul li ul
{
   border: 1px black solid;
   border-top: none;
   display: flex;
   flex-direction: column;
}
.menu_devoirs
{
   border-right: 1px black solid;
}
/*Contenu*/
section
{
   display: flex;
   width: 75%;
   margin: auto;
   height: 569px;
   background-color: white;
}

-
Edité par NeilSauvage 16 décembre 2018 à 8:39:18

Enlever espace entre <ul> et <li> menu déroulant?

Enlever espace entre <ul> et <li> menu déroulant?

Supprimer

Modérer

Signaler le message aux modérateurs