login  Naam:   Wachtwoord: 
Registreer je!
 Forum

dropdown verschijnt niet css (Opgelost)

Offline GroundZero - 07/11/2011 13:45
Avatar van GroundZeroLid Beste,

ik probeer een mega dropdown css menu te maken. echter wanneer ik over de link hoven dan komt hij niet tevoorschijn. kan iemand mij vertellen wat ik verkeerd doe?

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: 14px;
  21. 	font: inherit;
  22. 	vertical-align: baseline;
  23. 	color:#333;
  24. 	font-family:Verdana, Geneva, sans-serif, Arial;
  25. }
  26.  
  27. strong {
  28. 	font-weight:bold;	
  29. }
  30.  
  31. fieldset {
  32. 	border:1px solid #333;
  33. 	padding:12px;
  34. }
  35.  
  36. legend {
  37. 	font-weight:bolder;	
  38. }
  39.  
  40. label {
  41. 	display:inline-block;
  42. 	width:125px;
  43. 	margin-bottom:12px;	
  44. 	vertical-align:top;
  45. }
  46.  
  47. h1 {
  48. 	font-size:24px;
  49. 	font-weight:bold;	
  50. }
  51.  
  52. h2 {
  53. 	font-size:14px;
  54. 	font-weight:bold;	
  55. }
  56.  
  57. #menu {
  58. 	width:100%;
  59. 	height:80px;
  60. 	border-bottom:2px solid #FFF;
  61. 	background:#fd0198;
  62. 	box-shadow:0px 2px 5px #666666;
  63. 	-moz-box-shadow:0px 2px 5px #666666;
  64. 	-webkit-box-shadow:0px 2px 5px #666666;
  65. 	background:url(../images/button.png);
  66. 	background-repeat:repeat-x;
  67. }
  68.  
  69. #menu #menu-container {
  70. 	position:relative;
  71. 	width:980px;
  72. 	height:80px;
  73. 	margin:0px auto;
  74. }
  75.  
  76. #navigatie {
  77. 	float:left;
  78. }
  79.  
  80. #navigatie ul {
  81. 	list-style:none;
  82. 	margin-top:10px;
  83. }
  84.  
  85. #navigatie li {
  86. 	/* position:relative; */
  87. 	display:inline-block;
  88. 	height:60px;
  89. 	padding:0px 12px 0px 12px;
  90. 	margin-left:1px;
  91. 	text-align:center;
  92.  
  93. 	border-left:1px solid #d60080;
  94. 	border-right:1px solid #d60080;
  95. 	border-top:1px solid #ff69c2;
  96.  
  97. 	border-top-left-radius:6px;
  98. 	border-top-right-radius:6px;
  99. 	-moz-border-radius-topleft:6px;
  100. 	-moz-border-radius-topright:6px;
  101. 	-webkit-border-top-left-radius:6px;
  102. 	-webkit-border-top-right-radius:6px;
  103. }
  104.  
  105. #navigatie li a {
  106. 	text-decoration:none;
  107. 	color:#FFFFFF;
  108. 	display:block;
  109. 	margin-top:15px;
  110. }
  111.  
  112. #navigatie li a em {
  113. 	font-size:10px;	
  114. 	color:#FFFFFF;
  115. }
  116.  
  117. #navigatie li .diensten_sub {
  118. 	position:absolute;
  119. 	width:980px;
  120. 	height:100px;
  121. 	top:82px;
  122. 	left:-180px;
  123. 	background:#ffcc00;
  124. }
  125.  
  126. #navigatie li #diensten_main:hover .diensten_sub {
  127. 	left:1px;
  128. }
  129.  
  130. #logo {
  131. 	width:369px;
  132. 	height:70px;
  133. 	float:left;	
  134. 	margin:5px 100px 0px 5px;
  135. }
  136.  
  137. #wrapper {
  138. 	width:980px;
  139. 	margin:0px auto;
  140. 	overflow:hidden;	
  141. }


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2. 	<div id="menu-container">
  3.     	<div id="logo">
  4.         	<img src="images/logo.png" alt="logo" />
  5.         </div>
  6.         <div id="navigatie">
  7.         	<ul>
  8.             	<li><a href="#" title="portfolio">portfolio<br /><em>bekijk ons werk</em></a></li>
  9.                 <li>
  10.                 	<a href="#" title="diensten" id="diensten_main">diensten<br /><em>wat wij bieden</em></a>
  11.                     <div class="diensten_sub">
  12.  
  13.                     </div>
  14. 				</li>
  15.                 <li><a href="#" title="over ons">over ons<br /><em>leer ons kennen</em></a></li>
  16.                 <li><a href="#" title="contact">contact<br /><em>koffie of thee?</em></a></li>
  17.             </ul>
  18.         </div>
  19.     </div>
  20. </div>

2 antwoorden

Gesponsorde links
Offline Pieter - 07/11/2011 14:59
Avatar van Pieter Gouden medaille

SEO guru		 Heb je ergens een online voorbeeld? Dat test gemakkelijker. 
Offline GroundZero - 08/11/2011 14:49
Avatar van GroundZero Lid nee heb ik niet zit lokaal haha, heb het echter net opgelost zal dadelijk de oplossing posten dankjewel !! ;)
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.223s