Never really used dropdowns before and I'm trying to add one to an existing website. I stripped out all the
html and
css not related to this problem, and have posted it below. Problem is the drop down list isn't overlapping the div below it in IE...works fine in other browsers...I've tried various clear statements but its still a no go in IE 6...thanks for any help
- HTML: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="dropdown_test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wholecontainer">
<div id="headercontainer">
<div id="navbar">
<ul id="nav">
<li class="navbutton1"><a href="whoweare.html">Who We Are</a>
<ul class="dropdown">
<li>About Us</li>
<li>Meet The Departments</li>
<li>Testimonials</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</li>
<li class="navbutton2"><a href="whatwedo.html">What We Do</a>
</li>
</ul>
</div>
<div class="header_welcome"></div>
</div>
</div>
</body>
</html>
- HTML: Select all
/* CSS Document */
form, p, ul, li, dl, dt, dd, body, h1, h2, h3, h4, h5, h6 {
margin: 0; padding: 0;
}
#wholecontainer {
width: 742px;
margin-right: auto;
margin-left: auto;
margin-top: 8px;
}
#headercontainer {
height: 246px;
width: 742px;
}
/* Begin Navigation bar */
#navbar {
width: 636px;
height: 32px;
float: left;
padding: 0px;
border: none;
}
#navbar a {
color: #FFFFFF;
}
#navbar a:hover {
color: #CCCCCC;
}
.navbutton1, .navbutton1 a {
float: left;
margin: 0px;
height: 32px;
width: 144px;
display: block;
background-color: green;
}
.navbutton1 a:hover {
height: 32px;
width: 144px;
}
.navbutton2, .navbutton2 a {
float: left;
margin: 0px;
height: 32px;
width: 141px;
display: block;
background-color: green;
}
.navbutton2 a:hover {
height: 32px;
width: 141px;
}
/****************************start dropdown css*****************************/
#nav ul {
float: left;
position: relative;
}
#nav li {
list-style-type: none;
}
#nav ul a {
display: block;
width: 144px;
}
#nav ul li {
float: left;
width: 144px;
list-style-type: none;
background-color: red;
}
.dropdown {
float: left;
position: relative;
}
.header_welcome {
float: left;
height: 165px;
width: 636px;
background-color: orange;
}
some screenshots of the problem...
Working on a drop down menu, but the dropdown section doesn't overlap div below in IE
Mar 25th, 2008, 15:19
Similar Threads
