KOMPOOS.NL

drop down menu - CSS

home » css » text-effects » drop-down-menu.html

sitemap

voorbeeld van het (basis) drop-down menu

uitleg drop down menu

Een basis menu hoeft per definitie niet "saai en lelijk" te zijn. Zolang het menu maar razendsnel ingeladen kan worden en in alle browsers werkt, mag het er best "leuk uitzien". Plaats de stylesheet in de head-sectie van de pagina en plaats de html-code in de body-sectie van de pagina. Als je wilt, kan je de kleur-stelling en de afmetingen in de stylesheet aanpassen aan jouw eigen behoeften.

de stylesheet van de basis drop-down procedure


<style type="text/css">
	#drop-down-menu{margin-left:20px}
	ul{
		font-weight:bold;color:#ffffff;
		margin:0;
		padding:0;
		list-style:none}
	ul li{
		display:block;
		position:relative;
		float:left}
	li ul{display:none}
	ul li a{
		display:block;
		margin-left:1px;
		text-decoration:none;
		color:#ffffff;
		border-top:1px solid #B75963;
		padding: 5px 15px 5px 15px;
		background:#6E5463;
		white-space:nowrap}
	ul li a:hover{background:#985963;color:inherit}
	li:hover ul{ 
		display:block; 
		position:absolute}
	li:hover li{ 
		font-size:70%;
		clear:left; 
		width:12em}
	li:hover a{ background:#985963;color:inherit}
	li:hover li a:hover{background:#B75963;color:inherit}
	.clear_all{clear:both;height:0.5em;}
</style>

de html code van het drop-down menu


<ul id="drop-down-menu">
	<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">Basis</a></li> 
	<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">Menu</a> 
		<ul>
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 1</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 2</a></li> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 3</a></li> 
		</ul> 
	</li> 
	<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">Drop down</a> 
		<ul> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 1</a></li> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 2</a></li> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 3</a></li> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 4</a></li> 
		</ul> 
	</li>
	<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">Informatie</a> 
		<ul> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 1</a></li> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 2</a></li> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 3</a></li>
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 4</a></li> 
			<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">drop down menu 5</a></li> 
		</ul> 
	</li> 
	<li><a href="http://kompoos.nl/css/text-effects/drop-down-menu.html">Colofon</a></li> 
</ul>	
<p class="clear_all"></p>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.