Bonjour !
Je voudrais créer un menu déroulant en CSS sans javascript.
Voilà mon CSS :
Code :
- #menu {
- height:50px;
- }
- #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:hover ul li {
- float:none;
- }
|
Et mon menu HTML :
Code :
- <div id="menu">
- <ul>
- <li><a href="#">Item 1</a></li>
- <li><a href="#">Item 2</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>
- <li><a href="#">Item 3</a></li>
- </ul>
- </div>
|
Ca fait exactement ce que je veux sauf que ... le sous menu apparait en dessous de l'item 2 et je voudrais qu'il apparaisse au dessus ...
Vous auriez une idée de comment procéder ?
Merci !!
Sandra
Message édité par sandy kylo le 18-12-2009 à 15:25:58