Discussion :

[seydou17]

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.

mon code, un exemple dont je me servirai après votre réponse.
html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<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:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#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; }

Merci d'avance.

[Astoumix]

Bonjour,

Ajoute une class à ton second ul et parle aux li compris dedans.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div id="menu">
  <ul>
    <li><a href="#">Item </a>
       <ul class="nav-bis">
         <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>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.nav-bis li {
  height: 100px;
  width: 200px;
}