login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Dropdown menu met active state bij submenu hover

Offline eLIX - 09/04/2011 13:49 (laatste wijziging 09/04/2011 13:50)
Avatar van eLIXNieuw lid Hi guys,

Ik sukkel al een tijdje op een probleem met een bepaald menu.

Ik heb dus een horizontaal menu dat opgebouwd is uit images (gradients).
Wanneer je over een bepaalde menu hovert krijg je een dropdown menu te zien waarbij de achtergrond hetzelfde kleur is als het kleur onderaan de gradient.
Maar wanneer ik dan over de submenu's hover verdwijnt de hover image van het horizontaal menu.

Ik heb een kleine testopstelling gemaakt als volgt:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6.  
  7. <style type="text/css">
  8. 	ul#menu {list-style:none;}
  9. 	ul#menu li {display:inline; float:left; width:200px;}
  10. 	ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
  11. 	ul#menu li a:hover {background:#333333;}
  12. 	ul#menu li ul {display:none; position:relative; float:left;}
  13. 	ul#menu li:hover ul {display:block;}
  14. 	ul#menu li ul li a {background:#ff0000;}
  15. 	/*ul#menu li ul li.overlay {position:absolute; top:-26px; left:0;}*/
  17.  
  18. </head>
  19.  
  21. 	<ul id="menu">
  22.       <li><a href="#item1">Menu Item 1</a></li>
  23.       <li><a href="#item2">Menu Item 2</a>
  24.         <ul>
  25.           <li class="overlay"><a href="#item2">Menu Item 2</a></li>
  26.           <li><a href="#sub1">Sub Menu Item 1</a></li>
  27.           <li><a href="#sub2">Sub Menu Item 2</a></li>
  28.           <li><a href="#sub3">Sub Menu Item 3</a></li>
  29.        </ul>
  30.       </li>
  31.       <li><a href="#item3">Menu Item 3</a></li>
  32.     </ul>
  33. </body>
  34. </html>


Met die overlay class kan ik bijna het gewenste effect bekomen, was het niet dat mijn hover op het horizontaal menu verschillend moet zijn van de achtergrond van het submenu.

Alvast bedankt voor de hulp.

Greets,

Peter

2 antwoorden

Gesponsorde links
Offline valles10 - 09/04/2011 15:52
Avatar van valles10 HTML interesse Je moet een #li:hover{background} maken.
Offline eLIX - 14/04/2011 21:40
Avatar van eLIX Nieuw lid Thanks!

Ik heb nog wat moeten zoeken waar ik die juist nodig had maar uiteindelijk gevonden.
Voor de geïnteresseerden, hierbij mijn css:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. ul#menu {list-style:none;}
  2. 	ul#menu li {display:inline; float:left; width:200px;}
  3. 	ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
  4. 	ul#menu li:hover a {background:#333333;}
  5. 	ul#menu li ul {display:none; position:relative; float:left;}
  6. 	ul#menu li li:hover a {background:#ff0000;}
  7. 	ul#menu li:hover ul {display:block;}
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.161s