.test{
font-family: 'Roboto Regular', arial;}
ul {
margin-top: 2.5px;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
margin-top: 0px;
float: left;
width: 250px;
height: 60px;
background-color: #000000;
opacity: .8;
line-height: 60px;
text-align: center;
font-size: 20px;
margin-right: 1px;
border-style: solid; /* Style de la bordure */
border-width: 0px; /* Epaisseur de la bordure */
border-color: #EC0909; /* Couleur de la bordure */
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color:red;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
Oui c'est faisable tout dépend du rendu que tu désir obtenir.
Pour commencer ce que je ne comprend pas c'est pourquoi tu utilise une div vide avec un ID header.
Sauf cas spéciaux tu ne va pas avoir 10 header dans ta page, et même si c’était le cas une class pour chacun d'eux afin de les différencier ferrait l'affaire.
Apres deux coses que je ne comprend pas dans ton HTML, pourquoi ton image avec un style incrusté dedans alors qu'une class sur celle-ci et son style dans le CSS serait bien mieux.
Autre chose ton lien d'appel pour ta font doit se trouver dans <head> et non dans le body.
Si tu veut coller ton image puis ton titre puis ton menu je te conseil de revoir les dimensions de se dernier, de même laisser tes 3 ensembles être géré par flex depuis le <header> pourrait être sympa si tu autorise "wrap"
Une petite base
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="icon" type="assets/img/png" href="favicon.png" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Ocr</title>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css"> -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="" type="text/css"><!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
-->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style type="text/css">
.Iron{
font-family: 'Roboto', sans-serif;}
ul {
margin-top: 2.5px;
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
margin-top: 0px;
float: left;
width: 250px;
height: 60px;
background-color: #000000;
opacity: .8;
line-height: 60px;
text-align: center;
font-size: 20px;
margin-right: 1px;
border-style: solid; /* Style de la bordure */
border-width: 0px; /* Epaisseur de la bordure */
border-color: #EC0909; /* Couleur de la bordure */
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color:red;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
header{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
background: rgba(107, 118, 130, .8)
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
}
.imghead{
width: 75px;
height: 75px;
}
@media all and (max-width: 1320px) {
nav{
width: 100%;
display: flex;
justify-content: space-around;
}
}
</style>
</head>
<body>
<header class="header1">
<img class="imghead" src="https://image.noelshack.com/fichiers/2019/24/4/1560452797-iron-mechanics-1.png" alt="">
<h1 class="Iron">Iron Mechanics</h1>
<nav>
<ul>
<li class="test"><a href="#">Accueil</a></li>
<li class="test"><a href="#">L'équipe</a></li>
<li class="test"><a href="#">Projets</a></li>
<li class="test"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
Compos sui.
Mettre la barre de navigation avec le header
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Compos sui.