Sujet Précédent Sujet Suivant

Supprimer bordure top sur menu

Fermé
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 octobre 2024 - 28 mai 2015 à 17:12
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 29 mai 2015 à 19:07
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. 

<!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;
}
A voir également:

3 réponses

Réponse 1 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 29/05/2015 à 01:04
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.
0
Réponse 2 / 3
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 octobre 2024 110
29 mai 2015 à 11:16
Si je l'enlève, je n'ai plus de bordure à l'intérieure de mon menu.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
29 mai 2015 à 14:58
la bordure que tu veux enlever s'applique a quel element exactement ? (code html de l'element)
0
Réponse 3 / 3
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 17 octobre 2024 110
29 mai 2015 à 18:38
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.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 29/05/2015 à 19:12
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)
0

Discussions similaires

Top Model International : arnaque ?
Sonia023 -
Anthony -

17 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses