Faires des "menus" horizontaux avec html et css

Faires des "menus" horizontaux avec html et css - HTML/CSS - Programmation

Marsh Posté le 07-04-2015 à 15:36:02    

Bonsoir à tous,
 
J'essaie de faire des genre de menus horizontaux sur base de liste à puce (horizontaux, pas déroulants). J'arrive à ceci  
 
http://forum.pipas.org/menus-horizontal.jpg
 
Mon problème : le choix 2.1 est en dessous du 2 au lieu d'être en dessous du choix 1
Le 1.1 est, lui, bien en dessous du 1 et le 1.2 en dessous du 2 (et à coté du 1.1)
 

Code :
  1. <ul id="test">
  2. <li class="par2"><a href="">Choix 1</a>
  3.         <ul>
  4.             <li class="par2"><a href="">Choix 1.1</a></li>
  5.             <li class="par2"><a href="">Choix 1.2</a></li>
  6.         </ul>
  7.     </li>
  8. <li class="par2"><a href="">Choix 2</a>
  9.         <ul>
  10.             <li class="par2"><a href="">Choix 2.1</a></li>
  11.             <li class="par2"><a href="">Choix 2.2</a></li>
  12.         </ul>
  13.     </li>
  14. </ul>


 
et le css

Code :
  1. #test {
  2. padding:0;
  3. margin:0;
  4. background-color:yellow;
  5. overflow:hidden;
  6. }
  8. #test>li>ul {
  9. position:absolute;
  10. display:none;
  11. padding:0;
  12. margin:0;
  13. background-color:cyan;
  14. overflow:hidden;
  15. }
  17. #test>li:hover>ul {
  18. display:block;
  19. }
  21. .par2 {
  22. float:left;
  23. width:322px;
  24. margin:10px 0;
  25. list-style-type:none;
  26. text-align:center;
  27. }
  29. .par2+.par2 {
  30. margin-left:20px;
  31. }
  33. .par2>a {
  34. display:block;
  35. padding:10px 4px;
  36. background-color:rgba(74,147,143,0.6);
  37. color:white;
  38. }
  40. .par2>a:hover {
  41. text-decoration:none;
  42. background-color:#4a938f;
  43. }


 
Une idée ?


Message édité par zezette le 07-04-2015 à 15:43:26

---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
Reply

Marsh Posté le 07-04-2015 à 15:36:02   

Reply

Marsh Posté le 07-04-2015 à 15:53:05    

Il semble que si je force le left à 0px, ça marche...
 
#test>li>ul {
 position:absolute;
 left:0;
...


---------------
"Par moment j'me d'mande si chui pas con" G. de Suresnes
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed