niekdekker
03-30-2006, 01:31 AM
Hey!
You've probably had a 100 dropdownmenu questions, but for those of you who just can get enough, here's another problem!
The menu works fine in firefox, but internet explorer messes up things.
Here's a link to my menu:
http://student.cmd.hro.nl/0773257/other/dropdown.html
http://student.cmd.hro.nl/0773257/other/dropdown.css
The question:
What do I have to change/add in my code to make the dropdownmenu in internet explorer look exactly like the dropdownmenu in firefox?
THE HTML CODE:
<html>
<head>
<title>Dropdown</title>
<link href="dropdown.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li class="list1"><a href="index.php">Home</a></li>
<li class="list2"><a href="nieuwsoverzicht.php">Nieuws</a>
<ul>
<li class="list2"><a href="nieuws.php">Nieuws</a></li>
<li class="list2"><a href="agenda.php">Agenda</a></li>
</ul>
</li>
<li class="list3"><a href="artikelen.php">Artikelen</a>
<ul>
<li class="list3"><a href="columns.php">Columns</a></li>
<li class="list3"><a href="interviews.php">Interviews</a></li>
<li class="list3"><a href="spotprents.php">Spotprents</a></li>
</ul>
</li>
<li class="list4"><a href="forum.php">Forum</a></li>
<li class="list5"><a href="overdezesite.php">Over deze site</a>
<ul>
<li class="list5"><a href="uitleg.php">Uitleg</a></li>
<li class="list5"><a href="contact.php">Contact</a></li>
</ul>
</li>
</ul>
</body>
</html>
THE CSS CODE:
ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial;
font-size:20px;
text-align: center;
}
li {
float: left;
position: relative;
border: 2px solid #000000;
margin-left: 5px;
background-color:#FFFFFF;
bottom:-2px;
}
li a {color: #000000; text-decoration: none;}
li a:hover {color: #FFFFFF; text-decoration: none;}
li ul li:hover {background-color:#006600; color:#FFFFFF}
li:hover {background-color:#006600; color:#006600;}
li:hover a{display: block;}
li ul {
display: none;
position: absolute;
top: 24px;
left: -2;
background-color:#000000;
border: 1px solid #000000;
border-bottom: 3px solid #000000;
z-index:2;
}
li:hover ul {display: block;}
li ul li {
background-color:#FFFFFF;
border: 1px solid #000000;
margin-left: 0px;
font-size:16px;
z-index:2;
}
.list1 {width: 90px;}
.list2 {width: 96px;}
.list3 {width: 110px;}
.list4 {width: 90px;}
.list5 {width: 155px;}
Hey thanks a lot for all the trouble people!
Really appreciate it!
You've probably had a 100 dropdownmenu questions, but for those of you who just can get enough, here's another problem!
The menu works fine in firefox, but internet explorer messes up things.
Here's a link to my menu:
http://student.cmd.hro.nl/0773257/other/dropdown.html
http://student.cmd.hro.nl/0773257/other/dropdown.css
The question:
What do I have to change/add in my code to make the dropdownmenu in internet explorer look exactly like the dropdownmenu in firefox?
THE HTML CODE:
<html>
<head>
<title>Dropdown</title>
<link href="dropdown.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul id="menu">
<li class="list1"><a href="index.php">Home</a></li>
<li class="list2"><a href="nieuwsoverzicht.php">Nieuws</a>
<ul>
<li class="list2"><a href="nieuws.php">Nieuws</a></li>
<li class="list2"><a href="agenda.php">Agenda</a></li>
</ul>
</li>
<li class="list3"><a href="artikelen.php">Artikelen</a>
<ul>
<li class="list3"><a href="columns.php">Columns</a></li>
<li class="list3"><a href="interviews.php">Interviews</a></li>
<li class="list3"><a href="spotprents.php">Spotprents</a></li>
</ul>
</li>
<li class="list4"><a href="forum.php">Forum</a></li>
<li class="list5"><a href="overdezesite.php">Over deze site</a>
<ul>
<li class="list5"><a href="uitleg.php">Uitleg</a></li>
<li class="list5"><a href="contact.php">Contact</a></li>
</ul>
</li>
</ul>
</body>
</html>
THE CSS CODE:
ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial;
font-size:20px;
text-align: center;
}
li {
float: left;
position: relative;
border: 2px solid #000000;
margin-left: 5px;
background-color:#FFFFFF;
bottom:-2px;
}
li a {color: #000000; text-decoration: none;}
li a:hover {color: #FFFFFF; text-decoration: none;}
li ul li:hover {background-color:#006600; color:#FFFFFF}
li:hover {background-color:#006600; color:#006600;}
li:hover a{display: block;}
li ul {
display: none;
position: absolute;
top: 24px;
left: -2;
background-color:#000000;
border: 1px solid #000000;
border-bottom: 3px solid #000000;
z-index:2;
}
li:hover ul {display: block;}
li ul li {
background-color:#FFFFFF;
border: 1px solid #000000;
margin-left: 0px;
font-size:16px;
z-index:2;
}
.list1 {width: 90px;}
.list2 {width: 96px;}
.list3 {width: 110px;}
.list4 {width: 90px;}
.list5 {width: 155px;}
Hey thanks a lot for all the trouble people!
Really appreciate it!