Hauteur et largeur de sous menu horizontal
Résolu
penati17
Messages postés
42
Statut
Membre
-
penati17 Messages postés 42 Statut Membre -
penati17 Messages postés 42 Statut Membre -
Bonjour,
J'ai réalisé un menu déroulant horizontal html & css à deux niveau.
mon problème: je veux agrandir mon sous menu (mon 2e niveau) en hauteur et largeur pour insérer du teste et des images pour chaque élément du sous menu.
Et j'y arrive pas, j'ai essayé d'insérer des div avant et après le lien de mon sous menu mais en vain.
Quelque ligne de mon code:
Html:
css:
J'ai réalisé un menu déroulant horizontal html & css à deux niveau.
mon problème: je veux agrandir mon sous menu (mon 2e niveau) en hauteur et largeur pour insérer du teste et des images pour chaque élément du sous menu.
Et j'y arrive pas, j'ai essayé d'insérer des div avant et après le lien de mon sous menu mais en vain.
Quelque ligne de mon code:
Html:
<div id="menu">
<ul>
<li><a href="#">Item </a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
</ul>
</div>
css:
#menu ul { margin:0; padding:0; list-style-type:none; text-align:center; }
#menu li { float:left; margin:auto; padding:0; background-color:black; }
#menu li a { display:block; width:100px; color:white;text-decoration:none; padding:5px }
#menu li a:hover { color:#FFD700; }
#menu ul li ul { display:none; }
#menu ul li:hover ul { display:block; }
#menu li ul { position:absolute; }
A voir également:
- Hauteur et largeur de sous menu horizontal
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Samira a modifié le menu du jour que juliette lui avait envoyé. retrouvez les modifications proposées par samira : acceptez celles concernant les entrées, refusez celles concernant les plats et les desserts. combien de caractères (en incluant les espaces) contient la version finale du menu ? - Forum Matériel & Système
- Windows 11 menu démarrer classique - Guide
2 réponses
ouf j'ai pu trouver quelque chose enfin qui me sied bien.
Pour les mêmes problèmes regarder par en espérant vous aidez...
code html:
le css:
Merci et bonne soirée.
Pour les mêmes problèmes regarder par en espérant vous aidez...
code html:
<ul class="menu"> <li> <a href="#">Solutions</a> <div class="sous_menu"></div> </li> <li> <a href="#">Produits</a> <div class="sous_menu"></div> </li> <li> <a href="#">Support</a> <div class="sous_menu"></div> </li> </ul>
le css:
.menu { background: gray; }
.menu li { color: white; padding: 20px; display: inline-block; text-decoration: none; font-size: 18px; }
.menu .sous_menu {display: none; position: absolute; margin-top: 20px; margin-left: -21px;
border: 1px solid gray; width: 350px; height: 250px; }
.menu li a { text-decoration: none; color: white; padding: 15px; }
.menu li:hover { color: black; background: rgba(200,200,200,1); }
.menu li:hover a { color: black; }
.menu li:hover .sous_menu { display: block; }
Merci et bonne soirée.