Gå til innhold

Komplisert å lage "undermenyer"?

perpetrus382

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Skjeggevara

Skjeggevara

Skrevet
Skrevet

Kan også gjøre det litt enklere, og bruke Definition Lists. Satt opp en enkel sak nå nettopp for å illustrere. Hele poenget skjer egentlig i den aller siste linja i CSS'en, der et element som før var satt til display:none går over til display:block ved hover. Hvor høy kvalitet det er på denne koden, og hvor bra menyen ser ut, kan dog diskuteres.

 

<head>

<style type="text/css">

	* {
		margin:0px; 
		float:left;}

	#wrapper {
		margin:0px; 
		float:left;}

	.menu {
		display:block;}

	.menu dd {
		background-color:#ededed;
		padding:7px 0px 0px 0px;
		display:none;
		width:146px;
		border-bottom: 1px solid gray;
		border-left:1px solid gray;
		border-right:1px solid gray;}

	.menu dl {
		padding:1px;
		border:1px solid gray;
		display: block;
		width:146px;
		height:24px;
		background-color:#ededed;}

	.menu dl dt A {
		color:gray;
		padding:1px 5px 1px;
		text-decoration: underline;}

	.menu dl dd A {
		padding:0px 14px;
		color:gray;
		text-decoration: none;
		height:24px;
		width:146px;}

	.menu dl dt A, .menu dl dd A {
		font: normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}

	.menu, .menu dd, .menu dl, .menu dl dt A, {
		text-align:left;}

	.menu dl:hover {text-decoration:none;}
	.menu dl:hover dd {display:block;}

</style>
</head>

<body>
<div id="wrapper">
	<div class="menu">
		<dl>
			<dt><a href="#">Meny 1</a></dt>
			<dd><a href="#">Submeny 1.1</a></dd>
			<dd><a href="#">Submeny 1.2</a></dd>
			<dd><a href="#">Submeny 1.3</a></dd>			
		</dl>
	</div>
	<div class="menu">
		<dl>
			<dt><a href="#">Meny 2</a></dt>
			<dd><a href="#">Submeny 2.1</a></dd>
			<dd><a href="#">Submeny 2.2</a></dd>
			<dd><a href="#">Submeny 2.3</a></dd>			
		</dl>		
	</div>
	<div class="menu">
		<dl>
			<dt><a href="#">Meny 3</a></dt>
			<dd><a href="#">Submeny 3.1</a></dd>
			<dd><a href="#">Submeny 3.2</a></dd>			
			<dd><a href="#">Submeny 3.3</a></dd>
			<dd><a href="#">Submeny 3.4</a></dd>			
		</dl>
	</div>
</div>

</body>

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...