HTML/CSS drop down menu virker ikke.
Jeg er ved at uddanne mig til multimediedesigner, og har lige lavet et portfolio om mig selv: http://web330.webkn.dk/portfolio/home.htmlSom i kan se virker min drop down menu ikke optimalt (jeg bruger IE - men den virker ikke i nogle browsere)
Min html ser således ud:
<!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=utf-8" />
<title>Portfolio - Home</title>
<link href="home.css" rel="stylesheet" type="text/css" />
</head><!--header-->
<body>
<div id="mig"><img src="billeder/mig.jpg" alt="mig"/></div><!--mig-->
<div id="hjerte"><img src="billeder/hjerte.jpg" alt="hjerte"/></div> <!--hjerte-->
<div id="master">
<div id="banner"><a href="home.html"><img src="billeder/banner.png" alt="banner" width="800" height="96" border="0" /></a></div><!--banner-->
<div id="menu">
<ul id="ddmenu">
<li><a href="home.html" id="selected">Home</a></li>
<li><a href="semestre.html" id="menu2">Semestre</a>
<ul>
<li><a href="1semester.html" class="umenu">1. semester</a></li>
<li><a href="2semester.html" class="umenu">2. semester</a></li>
<li><a href="3semester.html" class="umenu">3. semester</a></li>
<li><a href="4semester.html" class="umenu">4. semester</a></li>
<li><a href="laering.html" class="umenu">Læring</a></li>
</ul>
</li>
<li><a href="egnevaerker.html" id="menu3">Egne værker</a>
<ul>
<li><a href="optagelsesproeve.html" class="umenu"> Optagelsesprøve</a></li>
<li><a href="corelpaintshop.html" class="umenu">Corel Paint Shop</a></li>
<li><a href="logogolftoej.html" class="umenu">Logo golftøj</a> </li>
<li><a href="logostudietoej.html" class="umenu">Logo studietøj </a></li>
<li><a href="tattoos.html" class="umenu">Tattoos</a></li>
</ul>
</li>
<li><a href="ommig.html" id="menu4">Om mig</a>
<ul>
<li><a href="uddannelse.html" class="umenu">Uddannelse</a></li>
<li><a href="kompetencer.html" class="umenu">Kompetencer</a>
</li>
</ul>
</li>
<li><a href="kontakt.html" id="menu5">Kontakt</a></li>
</ul><!--ddmenu-->
</div><!--menu-->
<div id="content">
<div id="boks">
<div id="scrollbar">
<div id="forsidetekst"><p><h2>Hej, og velkommen til min portfolio!</h2> Dette website er lavet for at du kan følge min udvikling gennem uddannelsen som multimediedesigner.</p><p>I min portfolio kan du finde værker, som jeg har lavet før jeg begyndte på skolen, og værker som jeg har lavet under uddannelsen. Udover det kan du læse om mig som person, og hvilke kompetencer jeg har. Kig blot i menuen, og se hvad du finder. Rigtig god fornøjelse!</p>
</div><!--forsidetekst-->
<div id="home1"><img src="billeder/home1.png" alt="home1"/></div> <!--home-->
<div id="home6"><img src="billeder/home6.png" alt="home6" width="340" height="350" border="0" /></div><!--home6-->
</div><!--scrollbar-->
</div><!--boks-->
</div><!--content-->
</div><!--master-->
</body><!--body-->
</html><!--html-->
Min css ser således ud:
@charset "utf-8";
/* CSS Document */
body {
background-color: #000000;
}
#mig {
position: absolute;
top: -95px;
left: -10px;
}
#hjerte {
position: absolute;
margin: 0 0 0 1220px;
}
#master {
height: 750px;
width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0;
background-color: transparent;
}
#banner {
height: 96px;
width: 800px;
position: absolute;
margin: 0 100px 0 100px;
padding: 0;
}
#ddmenu {
margin: 100px 100px 0 100px;
text-align: center;
font-family: calibri, arial, sans-serif;
font-size: 17px;
width: 800px;
padding: 0;
height: 30px;
position: absolute;
}
#ddmenu, #ddmenu ul {
list-style: none;
}
#ddmenu > li {
display: inline-block;
}
#ddmenu li a {
display: block;
display: table-cell;
vertical-align: middle;
}
#ddmenu ul {
display: none;
z-index: 999;
padding: 0;
position: absolute;
}
#ddmenu ul li a, #ddmenu a:visited {
color: #FFFFFF;
text-align: left;
padding-left: 5px;
text-decoration: none;
}
#ddmenu a {
color: #FFFFFF;
}
#ddmenu li:hover ul {
padding-left: 20px;
display: block;
}
#menu1,#menu2,#menu3,#menu4,#menu5 {
height: 35px;
width: 156px;
border-radius: 10px 10px 10px 10px;
background-color: #666666;
list-style: none;
text-decoration: none;
}
#selected {
height: 35px;
width: 156px;
border-radius: 10px 10px 10px 10px;
background-color: #999999;
list-style: none;
}
#menu1:hover,#menu2:hover,#menu3:hover,#menu4:hover,#menu5:hover {
background-color: #999999;
}
.umenu:hover {
background-color: #999999;
}
.umenu{
background-color: #666666;
height: 20px;
width: 115px;
font-size: 16px;
}
#content {
margin: 0;
padding: 0;
position: absolute;
height: 600px;
width: 1000px;
top: 130px;
}
#scrollbar {
height: 550px;
width: 800px;
overflow: auto;
margin: 22px 0 0 0;
}
#boks {
position: absolute;
margin: 20px 100px 0 100px;
padding: 0 0 0 0;
height: 595px;
width: 800px;
background-color: #666666;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#forsidetekst {
font-size: 16px;
font-family: calibri, arial, sans-serif;
margin: 30px 310px 0 70px;
color: #FFFFFF;
}
#home1 {
position: absolute;
margin: -269px 0 0 0;
}
#home6 {
margin: -25px 0 0 320px;
position: absolute;
}
