Sujet Précédent Sujet Suivant

Hauteur et largeur de sous menu horizontal

Résolu/Fermé
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014 - 20 févr. 2014 à 10:19
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014 - 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; }





2 réponses

Réponse 1 / 2
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014
20 févr. 2014 à 10:21
Merci d'avance.
0
Réponse 2 / 2
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014
20 févr. 2014 à 18:25
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.
0

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
dimensions TV 43 pouces
Pierre -
didmed -

1 réponse
Image Subliminale dans une vidéo
fred16430 -
fred16430 -

6 réponses
Ecran télé : diagonale / largeur / hauteur !
Myrial -
Achile -

20 réponses