J'ai essayé de créer un menu horizontal déroulant pour mon futur site.
Mon code HTML est du type
<div id="menu">
..<ul id="onglets">
...<li></li>
...<li></li>
...<li>
....<ul>
Sous-menu censé apparaître au passage de la souris
.....<li></li>
.....<li></li>
.....<li></li>
....</ul>
...</li>
..</ul>
</div>
(Avec des images avec des liens entre les <li>)
Le code CSS pour le sous-menu:
- onglets li ul li
{
list-style-type: none;
position: relative
left: -999px;
clear: both;
Pour enlever le float que j'avais mis plus haut
}
Jusqu'à là tout va bien, le sous-menu n'apparaît pas.
- onglets li:hover ul li
{
position: *
left: auto
right: ça dépend si la position est absolue ou relative
top: pareil
}
- Ici, quand je met en relative, les liens du sous-menu apparaissent parfaitement les uns en-dessous des autres, mais le texte en-dessous est décalé
. J'ai vu sur un forum qu'il fallait mettre en absolute, mais quand je met absulute, il y a 2 possibilités: soit je met #onglets li:hover ul li {position: absolute ...} et là double problème: le texte est décalé, mais en plus un seul lien du sous-menu n'apparaît!
!
Quand je met #onglets li:hover ul {position: absolute ...} sans le li à la fin, le sous-menu avec tous les liens s'affiche bien au-dessus du texte mais les liens sont côte à côte mais pas les uns en dessous des autres
De plus si je met la position en absolut, les liens ne serot pas au même endroit par rapport au menu en fonction de la résolution de l'écran, non
Comment faire ???