login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[CSS] Menu valt weg bij mouseover

Offline GroundZero - 21/11/2011 12:32 (laatste wijziging 23/11/2011 10:16)
Avatar van GroundZeroLid Beste,

ik heb een mooi dropdown menu gemaakt welke perfect werkt. Enigste nu is dat wanneer ik vanaf het hoofdmenu wil hoveren naar het submenu wat dan tevoorschijn komt zeg maar, dan valt deze weg.

Ik denk dat het met de Z-INDEX te maken heeft maar weet het niet zeker.
Het probleem is als volgt:

Het menu is een lijst met daar achter een IMG met een position. Deze image is een PNG bestand omdat het menu grafisch is en niet één vorm. In het midden is hij hoger, en naar de zijkanten toe word hij minder hoog.

Het menu wat als ik over een optie hover, dat komt inderdaad mooi tevoorschijn en ook achter de image van het menu. Tot hier toe dus alles keurig en netjes.

Echter is het nu zo dat wanneer ik dan met mijn muis pijltje naar onderen wil gaan om naar het dropdown menu te gaan dat deze weer verdwijnt.

Bijgaand mijn HTML en CSS code. Ik hoop dat iemand mij met dit probleem kan helpen, volgens mijn is het namelijk iets kleins wat je toevallig net moet weten 

HTML CODE:
php 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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Studiobizz | Audio &amp; Recording</title>
  6.  
  7. <link rel="stylesheet" type="text/css" href="css/style.css" />
  8.  
  9. </head>
  10. <body>
  11.  
  12. <div id="wrapper">
  13. 	<div id="logo">
  14.     	<img src="images/logo.png" alt="logo" />
  15.     </div>
  16.     <div id="opties">
  17.     	<a href="/" title="opname studio Studiobizz">opname studio Studiobizz</a> - 
  18.         <a href="route/" title="Route">Route</a> - <a href="faq/" title="FAQ">FAQ</a> - 
  19.         <a href="sitemap/" title="Sitemap">Sitemap</a>
  20.     </div>
  21.     <div id="header">
  22.     	<img src="images/header.png" alt="header" />
  23.     </div>
  24.     <div id="menu">
  25.     	<ul class="hoofd">
  26.         	<li><a href="#" title="Home">Home</a></li>
  27.             <li>
  28.             	<a href="#" title="Opname studio">Opname studio</a>
  29.                 <div class="opname-studio-dropdown">
  30.                 	<ul>
  31.                     	<li>Opname studio</li>
  32.                         <li>Drum booth</li>
  33.                         <li>Andere ruimtes</li>
  34.                         <li>Montage ruimte</li>
  35.                     </ul>
  36.                 </div>
  37.             </li>
  38.             <li>
  39.             	<a href="#" title="Diensten">Diensten</a>
  40.                 <div class="diensten-dropdown">
  41.                 	<ul>
  42.                     	<li>Audio &amp; Recording</li>
  43.                         <li>Voice-overs</li>
  44.                         <li>Reclame &amp; animaties</li>
  45.                         <li>Reclame &amp; drukwerk</li>
  46.                         <li>Grafische vormgeving</li>
  47.                     </ul>
  48.                 </div>
  49.             </li>
  50.             <li>
  51.             	<a href="#" title="Muziekstijlen">Muziekstijlen</a>
  52.                 <div class="muziekstijlen-dropdown">
  53.                 	<ul>
  54.                     	<li>Pop</li>
  55.                         <li>Jazz</li>
  56.                         <li>Latin</li>
  57.                         <li>Funk</li>
  58.                         <li>Drum &amp; bass</li>
  59.                         <li>Rock</li>
  60.                     </ul>
  61.                 </div>
  62.             </li>
  63.             <li>
  64.             	<a href="#" title="Prijzen">Prijzen</a>
  65.                 <div class="prijzen-dropdown">
  66.  
  67.                 </div>
  68.             </li>
  69.             <li>
  70.             	<a href="#" title="Referenties">Referenties</a>
  71.                 <div class="referenties-dropdown">
  72.  
  73.                 </div>
  74.             </li>
  75.             <li class="none"><a href="#" title="Contact">Contact</a></li>
  76.         </ul>
  77.         <img src="images/menu.png" alt="menu" />
  78.     </div>
  79.     <div id="content">
  80.     	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mi velit, placerat at placerat eu, cursus dapibus nisi. Sed at erat sed risus porttitor tempus. Phasellus imperdiet quam ac turpis vehicula scelerisque. In quis lectus massa, vitae suscipit lorem. Quisque leo sapien, consequat vitae vehicula et, aliquet sed nisl. Curabitur at turpis ut felis sollicitudin porta vitae quis urna. Phasellus volutpat porta venenatis. Sed hendrerit faucibus metus ac aliquam. Vestibulum dictum ornare lectus quis vehicula. Nullam venenatis quam sit amet velit sagittis sagittis. Etiam risus lorem, dictum at congue nec, dapibus non massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  81.     </div>
  82. </div>
  83.  
  84. </body>
  85. </html>


CSS CODE:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. html, body, div, span, applet, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. a, abbr, acronym, address, big, cite, code,
  7. del, dfn, em, img, ins, kbd, q, s, samp,
  8. small, strike, strong, sub, sup, tt, var,
  9. b, u, i, center,
  10. dl, dt, dd, ol, ul, li,
  11. fieldset, form, label, legend,
  12. table, caption, tbody, tfoot, thead, tr, th, td,
  13. article, aside, canvas, details, embed, 
  14. figure, figcaption, footer, header, hgroup, 
  15. menu, nav, output, ruby, section, summary,
  16. time, mark, audio, vide, imgo {
  17. 	margin: 0;
  18. 	padding: 0;
  19. 	border: 0;
  20. 	font-size: 100%;
  21. 	font: inherit;
  22. 	vertical-align: baseline;
  23. }
  24.  
  25. body {
  26. 	font-family:Verdana;
  27. 	font-size:12px;
  28. 	color:#333;	
  29. }
  30.  
  31. #wrapper {
  32. 	width:986px;
  33. 	min-height:800px;
  34. 	margin:25px auto;
  35. 	overflow:hidden;
  36. }
  37.  
  38. #logo {
  39. 	width:207px;
  40. 	height:60px;
  41. 	float:left;	
  42. 	margin-left:98px;
  43. }
  44.  
  45. #opties {
  46. 	width:300px;
  47. 	height:16px;
  48. 	float:right;
  49. 	margin:46px 32px 0px 0px;
  50. }
  51.  
  52. #opties a, #opties a:visited {
  53. 	color:#D2007A;
  54. 	text-decoration:none;	
  55. }
  56.  
  57. #opties a:hover {
  58. 	color:#750048;	
  59. }
  60.  
  61. #header {
  62. 	width:986px;
  63. 	height:289px;
  64. 	float:left;	
  65. }
  66.  
  67. #menu {
  68. 	width:986px;
  69. 	height:90px;
  70. 	position:relative;
  71. 	float:left;
  72. 	text-align:center;
  73. }
  74.  
  75. #menu img {
  76. 	position:absolute;
  77. 	top:0px;
  78. 	left:0px;
  79. 	z-index:9998;	
  80. }
  81.  
  82. #menu ul {
  83. 	list-style:none;
  84. }
  85.  
  86. #menu ul.hoofd {
  87. 	position:absolute;
  88. 	top:0px;
  89. 	z-index:9999;
  90. }
  91.  
  92. #menu li {
  93. 	display:inline-block;
  94. 	padding:0px 14px 0px 14px;
  95. 	height:23px;
  96. 	line-height:23px;
  97. 	margin-top:20px;
  98. 	border-right:2px solid #FFF;
  99. }
  100.  
  101. #menu li.none {
  102. 	border:none;	
  103. }
  104.  
  105. #menu li a {
  106. 	height:50px;
  107. 	width:100%;
  108. 	display:block;	
  109. }
  110.  
  111. #menu li a, #menu li a:visited {
  112. 	color:#FFF;
  113. 	text-decoration:none;
  114. 	font-size:18px;	
  115. }
  116.  
  117. #menu ul li ul {
  118. 	margin-top:35px;
  119. }
  120.  
  121. #menu ul li ul li {
  122. 	color:#FFFFFF;
  123. 	display:block;
  124. 	border:none;
  125. 	line-height:14px;
  126. 	margin:0px;
  127. 	padding:0px;
  128. }
  129.  
  130. .opname-studio-dropdown, .diensten-dropdown, .muziekstijlen-dropdown, .prijzen-dropdown, .referenties-dropdown {
  131. 	min-width:150px;
  132. 	min-height:100px;
  133. 	padding:10px;
  134. 	position:absolute;
  135. 	top:30px;
  136. 	left:-9999px;
  137. 	background:#333333;
  138. 	z-index:-1000;
  139. 	border-bottom-left-radius:12px;
  140. 	border-bottom-right-radius:12px;
  141. 	-moz-border-radius-bottomleft:12px;
  142. 	-moz-border-radius-bottomright:12px;
  143. 	-webkit-border-bottom-left-radius:12px;
  144. 	-webkit-border-bottom-right-radius:12px;
  145. }
  146.  
  147. #menu li:hover .opname-studio-dropdown {
  148. 	left:150px;
  149. }
  150.  
  151. #menu li:hover .diensten-dropdown {
  152. 	left:321px;
  153. }
  154.  
  155. #menu li:hover .muziekstijlen-dropdown {
  156. 	left:431px;
  157. }
  158.  
  159. #menu li:hover .prijzen-dropdown {
  160. 	left:581px;
  161. }
  162.  
  163. #menu li:hover .referenties-dropdown {
  164. 	left:677px;
  165. }
  166.  
  167. #content {
  168. 	width:966px;
  169. 	min-height:150px;
  170. 	float:left;
  171. 	margin-left:10px;
  172. }


EDIT:
Na wat aanpassingen in de CSS code werkt het nu wel, echter blijft het menu (de divisions) nu wel OVER het plaatje van het hoofdmenu vallen, ook al staat zijn Z-INDEX lager... ik krijg dit niet opgelost 

11 antwoorden

Gesponsorde links
Offline vinTage - 21/11/2011 12:45
Avatar van vinTage Nieuw lid Dat het 'wegvalt' ligt inderdaad aan je z-index, maar waarom werk je uberhaupt met position:absolute en z-index?
Dit kan veel handiger door een element middels hover zichtbaar te zetten (display block/none).
Offline GroundZero - 22/11/2011 19:04
Avatar van GroundZero Lid uhmmm... oke, wist ik niet maar valt hij dan ACHTER het menu (dat plaatje) omdat die niet vierkant is maar een beetje rond bol achtig loopt...

maar hoe zou ik voor nu dit probleem kunnen oplossen, weet iemand dat?
Offline Pieter - 23/11/2011 08:04
Avatar van Pieter Gouden medaille

SEO guru		 Heb je een voorbeeld online staan? Dan kijk ik er iets sneller naar. Nu hebben we enkel code en das iets lastiger om te debuggen.
Offline GroundZero - 23/11/2011 10:14 (laatste wijziging 23/11/2011 10:29)
Avatar van GroundZero Lid Dankjewel voor jullie antwoorden zo ver!
Ik heb hier een voorbeeld online geplaatst.

Ik heb de code in mijn 1e post vervangen door de recente code welke ik nu gebruik.
Hopelijk weet iemand een oplossing want ik loop nu totaal vast even haha 

Alvast hartelijk dank dat jullie willen kijken ;)

http://www.devbizz.nl/customers/studiobizz/


P.S. ik weet waar de fout zit maar krijg hem er niet uit 

Ik weergeef een DIV binnen een UL>LI.
Wanneer ik de UL op z-index:9999 zet neemt hij automatisch ook de div mee omdat deze binnen de UL valt zeg maar, terwijl ik in mijn CSS de div toch echt een eigen z-index geef. Hij negeert deze en houd die van de UL aan zeg maar, daarom valt hij over het plaatje.

Wanneer ik de UL z-index lager maak dan die van het achtergrond plaatje, dan werkt het menu wel correct, maar uiteraard valt dan de tekst van de LI's achter het achtergrond plaatje en hebben we er dus nog niks aan.

Ik krijg dit dus niet opgelost, maar daar zit het probleem in elk geval ;)
Offline Pieter - 23/11/2011 12:40
Avatar van Pieter Gouden medaille

SEO guru		 Ik kom uit op pagina-bestaat-niet.php.
Offline GroundZero - 23/11/2011 15:10 (laatste wijziging 23/11/2011 15:11)
Avatar van GroundZero Lid huh? hoe kan dat nou... net op 3 computers gekeken (Verschillende locaties) maar overal netjes de site 

http://www.devbizz.nl/customers/studiobizz/

Ow ik zie het al... niet op de link klikken via Sitemasters maar even selecteren, kopiëren en dan handmatig in je browser plakken dan werkt het wel.\

Geen idee waarom ik een pagina-niet-weergegeven krijg als ik direct op de link klik 
Offline vinTage - 23/11/2011 19:29
Avatar van vinTage Nieuw lid @pagina-niet-gevonden.

Je hebt waarschijnlijk heel je site ge 'anti hotlinked' staan in je htaccess ipv alleen bepaalde dirs en/of extenties ?
Offline Pieter - 24/11/2011 07:14
Avatar van Pieter Gouden medaille

SEO guru		 @vinTage, nope, ligt aan sima: de eindslash neemt sima niet meer erbij als link. 
Offline GroundZero - 24/11/2011 09:16
Avatar van GroundZero Lid Yeah ik had wel wat dingen anti-hotlinked staan maar dat betreft enkel extensies JPG/PNG en dergelijke meer niet, maar heb dat nu ook verwijderd, was namelijk niet door mij gemaakt allemaal die dingen 

Wist iemand verder toevallig nog een oplossing voor mijn probleem?  
Offline FrankieC - 27/11/2011 22:17
Avatar van FrankieC Lid Zet je main ul eens op position:relative. Dan krijg ik het volgende te zien in FF7: screenshot. Als je wilt dat het zwarte vlakje deels achter het paarse ding blijft en alleen het deel beneden zichtbaar wordt, dan kun je dat vergeten. Zoals je zelf al schrijft gaat dat niet binnen een ouder-kindrelatie.
Offline GroundZero - 28/11/2011 16:48
Avatar van GroundZero Lid ohhhh oke jammer!!!

weet iemand ergens een tutorial waarmee ik dat wel kan realiseren? of kan ik simpelweg de DIVISIONS buiten de UL/LI plaatsen en dan nog met een hover zichtbaar maken? of moet ik dan echt jQuery hebben?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.225s