Centrer une barre de navigationBonjour, Je voudrais centrer

stranger98

stranger98 Le 17 avril 2016 à 20:52 (Édité le 25 janvier 2019 à 17:50)

Bonjour,
Je voulais centrer un menu déroulant en dessous d'une image/logo mais j'arrive pas :(.
stranger98

stranger98 Le 17 avril 2016 à 20:54

<html>
   <head>
      <title>Chat</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="prueba.css">
   </head>
   <body>
      <div id="image" align="center">
         <a href="#">
         <img src="" 
         height="120" width="600">
         </a>
      </div>
      <div id="menu">
         <ul>
            <li>
            <a href="#">Home</a>
            </li>
         </ul>
         <ul>
            <li>
            <a href="#">Saisons</a>
            <ul>
               <li><a href="#">Lien 1</a></li>
               <li><a href="#">Lien 2</a></li>
               <li><a href="#">Lien 3</a></li>
               <li><a href="#">Lien 4</a></li>
            </ul>
            </li>
         </ul>
         <ul>
            <li>
            <a href="#">Armes</a>
            <ul>
               <li><a href="#">Lien 1</a></li>
               <li><a href="#">Lien 2</a></li>
               <li><a href="#">Lien 3</a></li>
               <li><a href="#">Lien 4</a></li>
            </ul>
            </li>
         </ul>
      </div>
   </body>
</html>
stranger98

stranger98 Le 17 avril 2016 à 20:54

body {
   overflow-x: hidden;
   margin: 0;
}
#image {
   min-width: 1200px;
   position: relative;
   background-color: #999966;
}
#menu {
   border-bottom: solid blue 3px;
   width: 100%;
   height: 100px;
   position: relative;
   background-color: #999966;
}
#menu ul {
   margin: 0;
   padding: 0;
   line-height: 30px;
}
#menu li {
   list-style: none;
   float: left;
   position: relative;
   background-color: #999;
}
#menu ul li a {
   color: #000;
   text-decoration: none;
   width: 150px;
   height: 30px;
   display: block;
   text-align: center;
   border: 1px solid #000;
}
#menu ul ul {
   position: absolute;
   top: 31px;
   visibility: hidden;
}
#menu ul li:hover ul {
   visibility: visible;
}
#menu li:hover {
   background-color: #FFF;
}
#menu ul li ul a:hover {
   color: #FFF;
   background-color: #000;
}
Clouder

Clouder Le 21 avril 2016 à 11:48

Peux-tu me donner une image du résultat que tu obtiens toi ? ^^ Je pourrai t'aider plus facilement. :)
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte