Sous-Menu Déroulant avec couleur et en horizontal

Fermé

linuxnoir Messages postés 38 Date d'inscription dimanche 10 novembre 2013 Statut Membre Dernière intervention 3 juillet 2017 - 4 juin 2017 à 11:57
linuxnoir Messages postés 38 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,

A voir également:

Menu déroulant css horizontal
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

2 réponses

Réponse 1 / 2

linuxnoir Messages postés 38 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,

Réponse 2 / 2

DelNC Messages postés 2234 Date d'inscription samedi 25 octobre 2014 Statut Membre Dernière intervention 22 février 2020 1 999
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

linuxnoir Messages postés 38 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,

Discussions similaires

Suppression listes déroulantes

trait horizontal avec du css

les entrées et les sortées

Supprimer liste déroulante Excel

[CSS] Forcé retour à la ligne

Discussions similaires

Newsletters