Hauteur et largeur de sous menu horizontal

Résolu

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention -
penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention - 20 févr. 2014 à 18:25

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:

<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 démarrer classique - Guide
Windows 11 menu contextuel classique - Guide
Réinitialiser menu démarrer windows 10 - Guide

2 réponses

Réponse 1 / 2

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention

Merci d'avance.

Réponse 2 / 2

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention

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:

		<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.

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?

menu caché

camping car

Comment activer le Bluetooth sur une TV Samsung ?

Déblocage du mode hôtel Philips 20HF5234/10

Votre réponse

Discussions similaires