html - Fly-out-menu virker ikke - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #12606 @ 14.10.07 11:26

Hej alle.
Jeg har lavet denne flyout-menu. Indrømmet, den er ikke flot, men jeg vil gerne lige have den til at virke først!

Der skal i alt være tre levels, men den viser kun to levels i IE7.
Desuden mener jeg ikke, at den overhovedet viste level 2 i IE6, som vi havde i skolen!

Hvis der er nogen, der kan hjælpe mig, og fortælle, hvad jeg skal ændre for at få vist level 3-menuerne, så vil jeg blive ´meget glad.

Jeg sætter 20 UP på spil for det svar, som jeg kan finde ud af at bruge. Bemærk, jeg taler ikke særligt godt kodesprog- er en stor amatør endnu...

Mange venlige hilsner,
Bimbom.

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

div#navi {
	background-color: #009999;
	float: left;
	width: 10em;
}
div#navi ul {
	margin: 0px;
	padding: 0px;
	width: 10em;
	background-color: #CC0000;
	border: thick solid #999999;
}
div#navi ul.level1 li.submenu:hover ul.level2,
div#navi ul.level2 li.submenu:hover ul.level3 {
	display:block;
}
div#navi li {
	position: relative;
	list-style: none;
	margin: 0px;
}
div#navi ul ul {
	position: absolute;
	top: 0;
	left: 10em;
	display: none;
}
div#navi li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #66FF00;
	display: block;
	padding: 0.25em 0 0.25em 0.5em; 
	text-decoration: none;
/*	width:6.5em;*/
	border-bottom: 1px solid #CCC;
}
div#navi li a:hover {
	background-color: #EBB;
}
.submenu {
	background-image: url(file:///F|/WEB/arrow.gif);
	background-repeat: no-repeat;
	background-position: right center;
}
.submenu2 {
	background-image: url(arrow2.gif);
	background-repeat: no-repeat;
	background-position: right center;
}
div#navi ul a {
/*	width: auto;*/
}
div#navi ul ul ul {
	background-color: #336600;
}

-->
</style>
</head>

<body>
<div id="navi">
<ul class="level1">
	<li><a href="index.html">forside</a></li>
		  	
	<li><a href="kontakt.html">kontakt</a>  </li>
				
	<li class="submenu"><a href="#">mad</a>
		<ul class="level2">
			<li class="submenu2"><a href="#">frugt og grønt</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
		</ul>
			
		<ul class="level2">
			<li class="submenu2"><a href="#">opskrifter</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>	
		</ul>
	</li>	
	
	<li class="submenu"><a href="#">seværdigheder</a>
		<ul class="level2">		
			<li class="submenu2"><a href="#">jylland</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>

			<li class="submenu2"><a href="#">fyn</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
	
			<li class="submenu2"><a href="#">sjælland</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
	
			<li class="submenu2"><a href="#">bornholm</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
	
			<li class="submenu2"><a href="#">øvrige</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
		</ul>
			
	<li class="submenu"><a href="#">dyreliv</a>
		<ul class="level2">
			<li class="submenu2"><a href="#">til lands</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
			
			<li class="submenu2"><a href="#">til vands</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
			
			<li class="submenu2"><a href="#">i luften</a>
				<ul class="level3">
					<li><a href="#">forår</a></li>
					<li><a href="#">sommer</a></li>
					<li><a href="#">efterår</a></li>
					<li><a href="#">vinter</a></li>
				</ul>
			</li>
		</ul>
	</li>
			
	<li class="submenu"><a href="#">aktiviteter</a>
		<ul class="level2">
			<li><a href="#">forår</a></li>
			<li><a href="#">sommer</a></li>
			<li><a href="#">efterår</a></li>
			<li><a href="#">vinter</a></li>
		</ul>
	</li>
</ul>
</div>
</body>
</html>

Indlæg senest redigeret d. 14.10.2007 11:27 af Bruger #12606

3 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #5620 @ 14.10.07 22:29

1.500

IE6 og under understøtter slet ikke hover på andet ind a tags.

http://snipplr.com/view/1912/internet-explorer-ie6-css-hover/

Bruger #11506 @ 14.10.07 23:06

190

Du skal bruge et HTC som du kan hente her: http://www.xs4all.nl/~peterned/csshover.html det burde få det til at virke i IE6, ellers har jeg omskrevet din kode med HTC:

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> whatever:hover cssmenu </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
<style type="text/css">

	body {
		behavior:url("htc/csshover.htc");
	}
	
	* {
		font-family:arial,tahoma,verdana,helvetica;
		font-size:12px;
	}

	/* the menu */

	ul,li,a {
		display:block;
		margin:0;
		padding:0;
		border:0;
	}

	ul {
		width:150px;
		border:1px solid #9d9da1;
		background:white;
		list-style:none;
	}

	li {
		position:relative;
		padding:1px;
		padding-left:26px;
		background:url("images/item_moz.gif") no-repeat;
		z-index:9;
	}
		li.folder	{ background:url("images/item_folder.gif") no-repeat; }		
		li.folder ul {
			position:absolute;
			left:120px; /* IE */
			top:5px;
		}		
			li.folder>ul { left:140px; } /* others */

	a {
		padding:2px;
		border:1px solid white;
		text-decoration:none;
		color:gray;
		font-weight:bold;
		width:100%; /* IE */
	}
		li>a { width:auto; } /* others */

	li a.submenu {
		background:url("images/sub.gif") right no-repeat;
	}

	/* regular hovers */

	a:hover {
		border-color:gray;
		background-color:#bbb7c7;
		color:black;
	}
		li.folder a:hover {
			background-color:#bbb7c7;
		}
	
	/* hovers with specificity */
	
	li.folder:hover { z-index:10; }		
		
	ul ul, li:hover ul ul {
		display:none;
	}

	li:hover ul, li:hover li:hover ul {
		display:block;
	}		

	</style>
</head>

<body>

	<ul id="menu">
		<li><a href="#"> forside </a></li>		
		<li class="folder">			
			<a href="#" class="submenu"> mad </a>
			<ul>
			<!-- <li><a href="#"> dolor </a></li> -->
				<li class="folder">
					<a href="#" class="submenu"> opskrifter</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
				<li class="folder">
					<a href="#" class="submenu"> frugt og grønt</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
			</ul>
		</li>
<li class="folder">			
			<a href="#" class="submenu"> seværdigheder </a>
			<ul>
			<!-- <li><a href="#"> dolor </a></li> -->
				<li class="folder">
					<a href="#" class="submenu"> Jylland</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
				<li class="folder">
					<a href="#" class="submenu"> Sjælland</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
                				<li class="folder">
					<a href="#" class="submenu"> Fyn</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
                				<li class="folder">
					<a href="#" class="submenu"> Øvrige Danmark</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
			</ul>
		</li>
        <li class="folder">			
			<a href="#" class="submenu"> dyreliv </a>
			<ul>
			<!-- <li><a href="#"> dolor </a></li> -->
				<li class="folder">
					<a href="#" class="submenu"> til lands</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
				<li class="folder">
					<a href="#" class="submenu"> til vands</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
                <li class="folder">
					<a href="#" class="submenu"> i luften</a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
			</ul>
		</li>
         <li class="folder">			
			<a href="#" class="submenu"> aktiviteter </a>
					<ul>
						<li><a href="#"> forår </a></li>
						<li><a href="#"> sommer </a></li>
						<li><a href="#"> efterår </a></li>
                        <li><a href="#"> vinter </a></li>
					</ul>
				</li>
				            			</ul>
</body>
</html>

Bruger #12606 @ 14.10.07 23:10

Hej Peter.
Det ser spændende ud, og jeg vil sige, at jeg er imponeret.
Det virker i IE7, og så vil jeg lige tjekke det på skolen snarest for at se, om det virker i IE6 også. Så kommer pointsene drønende din vej...
Jeg forstod godt nok ikke helt det der HTC. Men det kommer nok..

Tak.

Fly-out-menu virker ikke

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler