Sous-Menu Déroulant avec couleur et en horizontal

Fermé
linuxnoir
Messages postés
37
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
- 4 juin 2017 à 11:57
linuxnoir
Messages postés
37
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
- 25 juin 2017 à 18:53
Bonjour,
Depuis pas mal de semaine j'essaie en vain de créer un sous-menu horizontal avec une couleur et en horizontal.
J'ai suivis plein de tuto etc... mais j'arrive vraiment pas.
Souvent sa me décale ma page ou le menu contact et d'autre souci.

Je vous donne un exemple en image:


Mon code index.php
<!-- Début block-menu -->
<div id="block-menu">
<ul id="menu">
<li><a href="#" rel="nofollow noopener noreferrer" target="_blank" title="Accueil">Accueil</a></li>
<li><a href="" title=" rel="nofollow noopener noreferrer" target="_blank"~Récupération">Récupération</a></li>
<li><a href="../materiel.php" rel="nofollow noopener noreferrer" target="_blank">Materiel</a></li>
<li><a href="#" rel="nofollow noopener noreferrer" target="_blank">Services</a></li>
<li><a href="../contact.php" rel="nofollow noopener noreferrer" target="_blank">Contact</a></li>
</ul>
</div>
<!-- Fin block-menu -->


Mon style css :
/* Début Fond Barre Menu */
#block-menu {
font-family: Arial, Helvetica, sans-serif;
width: 950px;
height: 42px;
background: url(interface/fond-menu.png) no-repeat;
background-size: 100%;
background-position:100% 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 8px;
margin-left: auto;
}
/* Fin Fond Barre Menu */

/* Début Barre Menu */
#menu {
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
list-style: none;
margin-top: 0px;
padding-left: 15px;
padding-top: 19px;
}
#menu li {
display: inline; /* affichage horizontal */
}
#menu li a {
padding: 6px 15px;
margin: 0px;
background: #C10000;
color: #D6DBDC;
border: 1px solid #999;
text-decoration: none;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-border-top-left-radius: 4px; /* pour Chrome */
-webkit-border-top-right-radius: 4px; /* pour Chrome */

}
#menu li a:hover, #menu li a:focus {
background: #090;
color: #000;
}
/* Fin Barre Menu */

/* Bébut de ma page et option Bannière */


Cordialement Stéph,

2 réponses

linuxnoir
Messages postés
37
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
2
Modifié le 25 juin 2017 à 19:33
Bonjour,
Comme toujours je continue à chercher il me reste a trouvé comment évité les espacements dans le sous menu et sa sera bon j'ai testé plusieurs truc :
margin-right:auto;
margin-right:0;
margin-right:0px;
background
background-amage etc...


Je ne trouve vraiment pas.
Voila le résulta en image :


Et mon code css :
/* Début Barre Menu */
#menu {
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
list-style: none;
margin-top: 0px;
padding-left: 15px;
padding-top: 13px;
}
#menu ul {
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
list-style: none;
margin-top: 0px;
padding-left: 10px;
padding-top: -4px;
position:absolute;
left:-999em;
}
#menu li:hover ul {
left:auto;
}
#menu a {
display:block;
}
#menu li {
display: inline-block; /* affichage horizontal */
}

#menu ul a {
padding: 6px 10px;
margin: 0px;
background: #E4DFE0;
color: #D6DBDC;
border: 10px solid #999;
text-decoration: none;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-border-top-left-radius: 4px; /* pour Chrome */
-webkit-border-top-right-radius: 4px; /* pour Chrome */

}

#menu li a {
padding: 6px 15px;
margin: 0px;
background: #C10000; /* Couleur font menu Haut */
color: #D6DBDC; /* Couleur ecriture menu Haut Rouge */
border: 1px solid #999;
text-decoration: none;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-border-top-left-radius: 4px; /* pour Chrome */
-webkit-border-top-right-radius: 4px; /* pour Chrome */
}

#menu ul li a {
padding:5px 12px;
margin: 0px;
height:13px;
background: #7A8C8E; /* Couleur font sous menu bas */
color: #4C4F54; /* Couleur écriture sous menu */
border: 0px solid #999;
text-decoration: none;
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
border-radius: 0px 0px 0 0;
-webkit-border-top-left-radius: 0px; /* pour Chrome */
-webkit-border-top-right-radius: 0px; /* pour Chrome */
}

#menu li a:hover, #menu li a:focus {
background: #090;
color: #000;
}

#menu ul a:hover, #menu ul a:focus {
background: #98A6A7; /* Couleur font sous menu bas aHover */
color: #EEE; /* Couleur font ecriture sous menu bas */
}
/* Fin Barre Menu */



Merci de m'aidé car je recherche quand même depuis juin.

Cordialement,
0
DelNC
Messages postés
2231
Date d'inscription
samedi 25 octobre 2014
Statut
Membre
Dernière intervention
22 février 2020
2 000
4 juin 2017 à 12:36
Bonjour

J'ai trouvé un modèle sur ce lien; J'espère que tu trouveras ton bonheur.
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
-1
linuxnoir
Messages postés
37
Date d'inscription
dimanche 10 novembre 2013
Statut
Membre
Dernière intervention
3 juillet 2017
2
Modifié le 4 juin 2017 à 12:53
Bonjour,
Merci pour ce lien que je connais déjà et déjà testé mais sa ne fait pas ce que je veut, de plus ce code me décale toute ma page et le Sous menu et en vertical, hors moi je le veut en horizontal avec une couleur.

Perso j'avais déjà trouvé ton lien sur google mais aussi sur ce forum :
https://forums.commentcamarche.net/forum/affich-27154961-sous-menu-html-css

Comme expliqué sa fait des semaines que je recherche mais a chaque fois j'ai un nouveau souci sois sa décale la page sois sa décale le menu contact, ou sa ne ce positionne pas correctement etc...

Cordialement Stéphane,
0