[Résolu] CSS : Sous menu rémanent

CSS : Sous menu rémanent [Résolu] - HTML/CSS - Programmation

Marsh Posté le 23-09-2007 à 16:00:48    

Salut,
 
je voudrais mettre en place un système de menu/sous menu horizontal, et que lorsque la souris survole les éléments du menu, le sous menu apparaisse. La difficulté est que je veux que le sous menu reste affiché, même lorsque la souris ne survole plus un élément du menu (le sous menu affiché sera alors celui qui correspond au dernier élément de menu survolé).  
 
Je n'ai réussi pour l'instant qu'à afficher le sous menu au survol des éléments de menu, mais il disparait aussitôt que la souris s'en va.
 
Voici le code html:
 

Code :
  1. <ul id="menu_horiz">
  2.     <li class="accueil"><a href="index.html">accueil</a>
  3.       <ul id="submenu1">
  4.         <li><a href="#">Mot du président</a></li>
  5.         <li><a href="#">submenu1</a></li>
  6.         <li><a href="#">submenu1</a></li>
  7.         <li><a href="#">submenu1</a></li>
  8.         <li><a href="#">submenu1</a></li>
  9.       </ul>
  10.  </li>
  12.     <li class="entreprises"><a href="#">entreprises</a>
  13.       <ul id="submenu2">
  14.         <li><a href="#">Domaines de compétences</a></li>
  15.         <li><a href="#">Qualité</a></li>
  16.         <li><a href="#">Confidentialité</a></li>
  17.         <li><a href="#">Expériences</a></li>
  18.         <li><a href="#">Expériences</a></li>
  19.       </ul>
  20.  </li>
  22.     <li class="etudiants"><a href="#">étudiants</a>
  23.       <ul id="submenu3">
  24.         <li><a href="#">submenu3</a></li>
  25.         <li><a href="#">submenu3</a></li>
  26.         <li><a href="#">submenu3</a></li>
  27.         <li><a href="#">submenu3</a></li>
  28.         <li><a href="#">submenu3</a></li>
  29.       </ul>
  30.  </li>
  32.     <li class="contact""><a href="contact.html">contact</a>
  33.       <ul id="submenu4">
  34.         <li><a href="#">submenu4</a></li>
  35.         <li><a href="#">submenu4</a></li>
  36.         <li><a href="#">submenu4</a></li>
  37.         <li><a href="#">submenu4</a></li>
  38.         <li><a href="#">submenu4</a></li>
  39.       </ul>
  40.  </li>
  41. </ul>


 
Voici le code CSS :
 

Code :
  1. #menu_horiz {
  2.   padding-top:15px;
  3.   padding-bottom:5px;
  4.   background-color:#D35F5F;
  5. }
  7. #menu_horiz li {
  8.   display: inline ;
  9. }
  11. #menu_horiz li a {
  12.   margin-left:50px;
  13.   color: white;
  14.   font-size:1.5em;
  15.   font-weight:bold;
  16. }
  18. #menu_horiz li a:hover {
  20. }
  22. #menu_horiz ul { display:none; }
  24. #menu_horiz li:hover ul {
  25.   display:block;
  26.   background-color: green;
  27.   float:right;
  28.   margin-top:5px;
  29.   width:400px;
  30.   top: 10px;
  31.   height: 90px;
  32. }


Message édité par sonick le 23-09-2007 à 18:39:52
Reply

Marsh Posté le 23-09-2007 à 16:00:48   

Reply

Marsh Posté le 23-09-2007 à 18:22:24    

Tu as une fonction onMouseOver et onmouseOut ? tu gères comment ton menu dynamqiue ? Suffit simplement de faire un OnmouseOver et faire la bonne fonction javascript et ton sous menu reste fix meme après que le curseur s'en va.

Reply

Marsh Posté le 23-09-2007 à 18:39:14    

EN fait je me compliquais beaucoup, car je souhaitais programmer la page entièrement en css, maisil semble qu'IE6 ne gère pas ma manière de faire. J'utilise du JS maintenant et ça tourne sans problème, merci  ;)

Reply

Sujets relatifs:

Leave a Replay

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