login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Menu achtergrond werkt niet goed. (Opgelost)

Offline IndexS - 18/12/2010 10:58 (laatste wijziging 18/12/2010 11:00)
Avatar van IndexSMySQL interesse Hallo,

Ik heb een menu dat opzich prima werkt. Nu heb ik voor <a class="sub-a" href="#" title="Keuzemenu"></a> een achtergrondplaatje. De achtergrond werkt, ook de hover werkt. Maar nu komt het probleem. Als ik nu met de muis naar beneden ga naar het submenu dan wordt de achtergrond van bovenstaande hetzelfde als de hover van het submenu; grijs. Ik kan het niet voor elkaar krijgen om daar het achtergrond plaatje te houden.

Ik hoop dat iemand me kan helpen.  Ik heb me er nu helemaal blind op gestaard.  

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .containermenu {width:155px;}
  2.  
  3. .nav,
  4. .nav ul {list-style-type:none; margin:0; padding:0; float:left;}
  5. .nav a {text-decoration:none;}
  6. .nav {font-family: verdana, sans-serif; font-size:10px;}
  7.  
  8. .nav a {float:left; background:#FFF; color:#000; line-height:16px; padding: 4px 0px 4px 4px; border:1px solid #C0C0C0; margin-bottom: -1px;}
  9. .nav a.sub-a {background:url(../images/menu_kies.gif) no-repeat center;}
  10. .nav a.sub-a:hover {background:url(../images/menu_kies.gif) no-repeat center;}
  11. .nav a.sub-a:active {background:url(../images/menu_kies.gif) no-repeat center;}
  12. .nav a.sub-a:focus {background:url(../images/menu_kies.gif) no-repeat center;}
  13.  
  14.  
  15. .nav a:hover,
  16. .nav a:focus,
  17. .nav a:active {outline:0; color:#fff; background:#222;}
  18.  
  19. .nav li:hover > a {color:#fff; background:#C0C0C0;} 
  20.  
  21.  .nav {width:156px; margin-right:-1px;}
  22. .nav a {width:154px; margin-right:-155px;} 
  23. .nav ul li {max-width:156px;} 
  24.  
  25. .nav ul.fly {top:-25px;} 
  26. .nav ul.fly2 {top:-41px;}
  27.  
  28. .nav ul.fly {left:155px;}
  29. .nav .left ul.fly {left:auto; right:155px;}
  30.  
  31.  
  32. .nav ul {position:relative; margin-bottom:-10000px;} 
  33. .nav ul li {float:left; clear:left;}
  34. .nav a {position:relative;}
  35. .sub-li {margin-top:-10000px;}
  36. .sub-a {margin-top:10000px;}
  37.  
  38. .sub-li a:hover,
  39. .sub-li a:focus,
  40. .sub-li a:active {margin-right:0;}
  41.  
  42. .nav ul:hover {clear:left;}
  43.  
  44. .nav .sub-li {width:100%;}
  45. a:active {}


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="containermenu">
  2. <ul class="nav">
  3.    <li class="sub-li"><a class="sub-a" href="#" title="Keuzemenu"></a>
  4.        <ul>
  5.            <li><a href="cu410n.html" title="CU 410N">CU 410 N</a></li>
  6.            <li><a href="fk2.html" title=" FK 2">FK 2</a></li>
  7.            <li><a href="k5_32.html" title="K5 32">K5 32</a></li>
  8.        </ul>
  9.     </li>
  10. </ul>
  11. </div>
[wiki]

6 antwoorden

Gesponsorde links
Offline Filip - 18/12/2010 12:19
Avatar van Filip IRC guru Heb je misschien een link naar een voorbeeld online?

Zonder de images is de code ook niet echt testbaar. Maar in afwachting kan je met firebug (firebox extentie) al wel kijken wat die sub-items erven van de omkaderende elementen.
Offline IndexS - 18/12/2010 15:45 (laatste wijziging 18/12/2010 15:47)
Avatar van IndexS MySQL interesse Hier een voorbeeldje. Zoals je ziet is de knop met achtergrond goed zichtbaar, maar zodra je na het submenu gaat dan wordt de knop zelf ook grijs. En de bedoeling is dat het plaatje als achtergrond blijft.

voorbeeldje
Offline FrankL - 18/12/2010 16:28
Avatar van FrankL Lid Het achtergrondplaatje is ook sub-a, daardoor wordt ook dat gedeelte grijs. Je moet dus de class sub-a alleen bij de links gebruiken en niet heel het gedeelte denk ik zo.
Bedankt door: IndexS
Offline IndexS - 18/12/2010 18:29 (laatste wijziging 21/12/2010 16:04)
Avatar van IndexS MySQL interesse sub-a is volgens mij alleen maar het gedeelte met het plaatje. Het submenu is niet class sub-a.

Iemand die een idee heeft??  
Offline rickvanhout - 22/12/2010 09:32 (laatste wijziging 22/12/2010 09:32)
Avatar van rickvanhout Lid Probeer dit eens, op regel 19

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. .nav li:hover > a {color:#fff; background:#C0C0C0;}

moet worden

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. .nav li ul li:hover > a {color:#fff; background:#C0C0C0;}
Bedankt door: IndexS
Offline IndexS - 22/12/2010 11:07
Avatar van IndexS MySQL interesse Bedankt voor je reactie! Het is de oplossing voor mijn probleem.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s