Menu bordures
Fermé
besten
Messages postés
90
Date d'inscription
mercredi 19 octobre 2011
Statut
Membre
Dernière intervention
29 septembre 2023
-
7 mai 2014 à 04:56
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023 - 7 mai 2014 à 22:44
besten Messages postés 90 Date d'inscription mercredi 19 octobre 2011 Statut Membre Dernière intervention 29 septembre 2023 - 7 mai 2014 à 22:44
A voir également:
- Menu bordures
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
- Menu contextuel windows 11 - Guide
2 réponses
Mihawk
Messages postés
4313
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
845
7 mai 2014 à 10:59
7 mai 2014 à 10:59
Hello,
Pour les menus verticaux tu peux uniquement mettre une :
Pour les menus horizontaux, tu peux uniquement mettre :
Pour les menus verticaux tu peux uniquement mettre une :
border-top: none;Chaque item aura sa séparation, et le premier item tout en haut bénéficiera de la bordure de son parent.
Pour les menus horizontaux, tu peux uniquement mettre :
border-left: none;Le seul inconvénient est que ça supprime la bordure tout à gauche de ton menu. Tu peux remédier à ça en utilisant la pseudo-classe first-child :
.menu-item:first-child {
border-left: 1px solid black;
}
besten
Messages postés
90
Date d'inscription
mercredi 19 octobre 2011
Statut
Membre
Dernière intervention
29 septembre 2023
Modifié par besten le 7/05/2014 à 22:46
Modifié par besten le 7/05/2014 à 22:46
J'ai essayé ce que tu m'as dit, mais ça ne marche pas, je ne vois pas les bordures. J'aimerais avoir des bordures comme si le menu était un tableau d'un ligne et de 8 colonnes, avoir des bordures uniformes, je ne veux pas d'une bordure collée à une autre bordure pour avoir une double épaisseur.
Avec le code HTML et CSS, montre moi comment je peux avoir ce que je veux s'il te plait.
Je précise que je suis en mode apprentissage, j'essaie de toucher à tout.
Voici le code HTML :
Voici le code CSS
Avec le code HTML et CSS, montre moi comment je peux avoir ce que je veux s'il te plait.
Je précise que je suis en mode apprentissage, j'essaie de toucher à tout.
Voici le code HTML :
<div id="menu">
<ul>
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li>
<a href="#">Sous Menu I</a>
</li>
<li>
<a href="#">Sous Menu II</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
</li>
<li>
<a href="#">Menu 4</a>
<ul>
<li>
<a href="#">Sous Menu III</a>
</li>
<li>
<a href="#">Sous Menu IV</a>
<ul>
<li>
<a href="#">Sous Sous Menu A</a>
</li>
<li>
<a href="#">Sous Sous Menu B</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</li>
<li>
<a href="#">Menu 6</a>
</li>
<li>
<a href="#">Menu 7</a>
</li>
<li>
<a href="#">Menu 8</a>
</li>
</ul>
</div>
Voici le code CSS
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:blue;
}
#menu li a {
display:block;
color:black;
text-decoration:none;
padding:5px;
font-size:16px;
line-height:15px;
border-top: none;
border-left: none;
}
#menu li a:hover {
color:#FFD700;
text-decoration: underline;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu ul li ul li ul {
display:none;
}
#menu ul li ul li ul li {
display:none;
}
#menu ul li ul li:hover ul {
display:block;
position:absolute;
margin:-25px 0 0 110px;
}
#menu ul li ul li:hover ul li {
display:block;
}
