Supprimer bordure top sur menu
barale61
Messages postés
1126
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'essai de faire un menu horizontal déroulant et je n'arrive pas à supprimer ma bordure en haut. Voilà le code en question:
Je vous remercie de votre aide.
J'essai de faire un menu horizontal déroulant et je n'arrive pas à supprimer ma bordure en haut. Voilà le code en question:
Je vous remercie de votre aide.
<!doctype html>
<html>
<head>
<title>Menu déroulant CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul id="menu">
<li><a href="#">Menu 1</a>
<ul>
<li><img src="images/icones/android.png"/><a href="#">Level 1.1</a></li>
<li><img src="images/icones/chrome2.png"/><a href="#">Level 1.2</li>
<li><img src="images/icones/firefox2.png"/><a href="#">Level 1.3</a></li>
</ul>
</li><li><a href="#">Menu 2</a>
<ul>
<li><img src="images/icones/fungu.png"/><a href="#">Level 2.1</a></li>
<li><img src="images/icones/firefox2.png"/><a href="#">Level 2.2</a></li>
<li><img src="images/icones/linkedin.png"/><a href="#">Level 2.3</a></li>
<li><img src="images/icones/safari2.png"/><a href="#">Level 2.3</a></li>
<li><img src="images/icones/opera2.png"/><a href="#">Level 2.4</a></li>
</ul>
</li><li><a href="#">Menu 3</a>
<ul>
<li><img src="images/icones/safari2.png"/><a href="#">Level 3.1</a></li>
<li><img src="images/icones/linkedin.png"/><a href="#">Level 3.2</a></li>
<li><img src="images/icones/firefox2.png"/><a href="#">Level 3.3</a></li>
</ul>
</li>
</ul>
/* partie positionnement */
#menu a {
display:block;
color: #fff;
text-decoration:none;
}
#menu {
border-top:none;
}
/* Bordure à supprimer sur la 1ere li */
#menu ul li:nth-child(1){
border:none;
}
#menu li {
border-top: 1px solid #070707;
}
#menu > li, #menu > li li {
position: relative;
display:inline-block;
width: 110px;
padding: 6px 15px;
background-color: #777;
transition: background-color 0.5s;
line-height: 18px;
}
#menu > li li {
background: transparent none;
}
#menu > li li a {
color: #444; }
#menu > li li:hover {
background:#777; }
}
#menu > li:hover {
background-color: #777;
}
/* dans cette déclaration, on fixe le max-height */
#menu ul {
position: absolute;
top: 1.9em;
left:0;
max-height:0em;
margin:0px 0 0 0;
padding:0;
background-color:#ddd;
overflow:hidden;
transition: 0.7s max-height 0.1s;
}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
max-height:19em;
}
/* Arrondi des coins sur les dernières li et ul */
#menu > li li:last-child {
border-radius: 0 0 10px 10px;
}
#menu ul:last-child {
border-radius: 0 0 10px 10px;
}
li img {
float: left;
margin:0 10px -5px -10px;
}
3 réponses
-
salut
enlève#menu li { border-top: 1px solid #070707; }
tout simplement
sinon pense que la dernière déclaration css est toujours celle qui sera prise en compte dans l'ordre suivant
dernière ligne faisant référence à la propriété / class id ou tag
1) css externe
2) css in page dans la balise <style>
3) css style="..." directement dans le tag html
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus. -
Si je l'enlève, je n'ai plus de bordure à l'intérieure de mon menu.
-
Sur le haut de liste ul d'ailleurs je fais
#menu { border-top:none; }
mais c'est en faisant#menu ul li:nth-child(1){ border:none; }
qu'elle s'enlève seulement sur la 1ère li.-
Bon pas trop compris mais si il y a un border déclaré sur #menu li placé apres c'est #menu li qui sera pris en compte
donc mets:nth-child(1) apres #menu li
tu peux aussi utiliser #menu ul li:first-child
j'avais deja repondu
--> la dernière déclaration css est toujours celle qui sera prise en compte dans l'ordre suivant
dernière ligne faisant référence à la propriété / class id ou tag
donc #menu li est pacé après #menu ul li nth-child(1)
il va donc annuler #menu ul li nth-child(1)
-
