Menu horizontal avec logo au milieu par ThomasLouis3 - page 1

Bonjour donc j'aimerais que vous m'aidiez car je suis bloqué sur 2-3 étapes, j'aimerais que ma navigation bar soit donc avec un logo aux milieux mais qu'il puisse être ancré je les fais mais le problème que j'ai c'est que le logo n'est pas centré sur la page c'est-à-dire quand je prends la souris et bouge la molette et la navigation bar fait n'importe quoi ... de plus j'aimerais que le texte de mes navigations soit centré et en bas et non en haut, comme sur mon code en dessous. Et si vous pensez que mon code comporte des erreurs autres vous pouvez me le dire merci

<body>
    
    <div class="bar"> <ul>
      
          <li> <a href="#"> Cuisine </a>
           <ul>
               <li> <a href="#"> Coupe legume </a></li>
               <li> <a href="#"> Cocotte saveurs </a></li>
               <li> <a href="#"> Hachoir emince tout </a></li>
              </ul>
                </li>
          <li> <a href="#"> Bricolage </a> 
              <ul>
               <li> <a href="#"> Renovateur Bois </a></li>
               <li> <a href="#"> Pierre clean </a></li>
                  <li> <a href="#"> clefs universelles </a></li>
              </ul>
        </li>
        
        <li><a href="#" ><img id="logo" src="logo%20TDT.png" alt="logo"/></a></li>
        
          <li> <a href="#"> Automobile </a>
              <ul>
               <li> <a href="#"> Stylo anti rayure </a></li>
               <li> <a href="#"> chiffons microphibre </a></li>
               <li> <a href="#"> Lave voiture </a></li>
              </ul>
          </li>
          <li> <a href="#"> A propos </a>
                 <ul>
                     <li> <a href="#"> Qui sommes nous ?</a></li>
                     <li> <a href="#"> Livraison </a></li>
                     <li> <a href="#"> Paiment Sécurisé </a></li>
                 </ul>
          </li>
     </ul>
    </div>
    <br>
    
    
</body>

.bar   {
    
    text-align:center;
    width:100%;
    background:#2C75FF;
    opacity: 0.;   
           }


.bar ul { margin:auto;
          padding:auto;
        margin: auto;
          list-style:none;
          position:relative;
             }


.bar ul li a {
   display:inline-block;
    margin-left: 60px;
     padding:40px;
    color:white;
    text-decoration:inherit;

                  }


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

.bar ul li {
    float:left;
    list-style:inherit;
                }

.bar ul ul {   
             display:none;   
             }

.bar ul li:hover > ul {
                        display:block;              
                        }


.bar ul li:hover {
    background:black;
    transition:0.9s;
            }


.bar ul li:hover a {
                     color:white;             
                      }

.bar ul ul {
          background: #2C75FF;
          padding:0px;
          margin:0px;
          position:absolute;
          top:100%;
                }


.bar ul li a:hover {
    background:white;
    color: black;
    transition:0.3s;
         }



.bar ul ul li {
    float:none;
    position:relative;
}


.bar ul ul li a {
    padding:25px;
    color:white;
    width:300px;
    text-align:left;                       
        }

.bar ul ul li a:hover {
    background:white;
    color:black;
    transition:0.7s;
                    
                    }

Menu horizontal avec logo au milieu

Menu horizontal avec logo au milieu

Supprimer

Modérer

Signaler le message aux modérateurs