login  Naam:   Wachtwoord: 
Registreer je!
 Forum

dropdownmenu submenu uitlijning

Offline bitp - 10/08/2012 21:20 (laatste wijziging 10/08/2012 21:53)
Avatar van bitpLid Hoi,
ik ben bezig met een dropdownmenu, maar de submenu komt niet mooi onder het hoofdmenu zie Screenshot
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menunav {
  2. 	position: absolute;
  3. 	display:inline;
  4. 	width:620px;
  5. 	margin-left:321px;
  6. 	margin-top:168px;
  7. 	}
  8. #menunav li
  9. {
  10. 	float: left;
  11. 	margin: 0 0.15em;
  12. 	padding-right:15px;
  13. 	font-size:26px;
  14. 	color:#FFF;
  15. 	list-style:none;
  16. 	}
  17. #menunav a
  18. {
  19. 	color: #FFF;
  20. 	text-decoration: none;
  21. 	text-align: center;
  22. 	line-height: 20px;
  23. 	height: 60px;
  24. 	padding-left:5px;
  25. 	padding-right:5px;
  26. 	padding-top:10px;
  27. 	display: block;
  28. 	font-variant:small-caps;
  29. 	} 
  30. #menunav ul
  31. {
  32. 	font-family: Georgia, "Times New Roman", Times, serif;		 
  33. 	list-style:none;
  34. 	position:absolute;
  35. 	left:-9999px;
  36. 	}
  37. #menunav ul li{
  38. 	padding-top:1px;
  39. 	float:none;
  40. 	padding-left:5px;
  41. 	padding-right:5px;
  42. 	width:auto;
  43. 	}
  44. #menunav ul a{
  45. 	white-space:nowrap; 
  46. 	}
  47. #menunav li:hover ul{ 
  48. 	left:0;
  49. 	}
  50. #menunav li:hover a{
  51. 	background:orange;
  52. 	text-decoration:none;
  53. 	border-bottom-color:#333;
  54. 	border-bottom-style:solid;
  55. 	border-bottom-width:thick;
  56. 	}
  57. #menunav li:hover ul a{ 
  58. 	text-decoration:none;
  59. 	}
  60. #menunav li:hover ul li a:hover{
  61. 	background:orange;
  62. 	}


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul id="menunav">
  2.                 <li>
  3.                  <a href="?pagina=home" title="Home">Home</a>
  4.                 </li>
  5.                 <li>
  6.                  <a href="?pagina=news" title="Nieuws" >Nieuws</a>
  7.                 </li>       
  8.                 <li>
  9.                  <a href="forum" title="Forum" >Forum</a>
  10.                   <ul>
  11.                    <li>
  12.                     <a href="forum" title="Forum">Forum cat 1</a>
  13.                    </li>
  14.                    <li>
  15.                     <a href="forum" title="Forum">Forum cat 2</a>
  16.                    </li>
  17.                    <li>
  18.                     <a href="forum" title="Forum">Forum cat 3</a>
  19.                    </li>
  20.                   </ul>
  21.                </li>
  22.                 <li>
  23.                  <a href="?pagina=contact" title="contacteer" >Contact</a>
  24.                 </li>
  25.                 <li>
  26.                  <a href="?pagina=links" title="Links" >Links</a>
  27.                 </li>
  28.                </ul>

heb nu al van alles geprobeerd maar het luk me niet deze mooi onder de hoofdmenu te zetten, blijft steeds links staan.
alvast bedankt.
edit:
met het volgende zou het me wel lukken;
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menunav ul li{
  2. 	padding-top:1px;
  3. 	float:none;
  4. 	padding-left:5px;
  5. 	padding-right:5px;
  6. 	width:auto;
  7. 	margin-left:213px;/*enkel in ff*/
  8. 	}

2 antwoorden

Gesponsorde links
Offline Martijn - 22/08/2012 12:23
Avatar van Martijn Crew PHP Er zijn heel veel handige scriptjes die dit heel mooi kunnen, zowel met als zonder javascript, daar zou je aan naar moeten kijken 
Offline avancleef - 23/08/2012 09:38 (laatste wijziging 23/08/2012 09:39)
Avatar van avancleef Nieuw lid Ik doe altijd:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2. <li><a href="#" onclick="return false;">Menu keuze</a>
  3.    <div class="submenu">
  4.  
  5.    </div>
  6. </li>
  7. </ul>


het submenu heeft standaard een position:absolute, left:-9999px;

wanneer ik dan hover over "menu keuze" dan geef ik het submenu een left:auto;
Hij begint dan netjes exact er onder en sluit exact aan.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s