PDA

Click to See Complete Forum and Search --> : Drop down doesn't work in I.E.

owosso
06-16-2006, 03:15 PM
Anyone know how to get this drop down to work in I.E. It works in Safari and Netscape



<!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">
<!--


body {
background-image: url(world.gif);
background-repeat: no-repeat;
background-position: center;
background-color: #e7e8ed;
behavior:url(css/csshover.htc);
}

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color: #005296;
}

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color: #005296;
font-style: italic;
text-decoration: none;
}


#container {
position: absolute;
height: 100%;
width: 700px;
background-color: #FFFFFF;
top: 0px;
left: 0px;
background-image: url(header_sub);
background-repeat: no-repeat;
background-position: top;
}

#headerlogo {
position: absolute;
height: 54px;
width: 225px;
left: 40px;
top: 55px;
}

#search {
position: absolute;
height: 20px;
width: 225px;
left: 475px;
top: 80px;
}


#address {
position: absolute;
height: 20px;
width: 175px;
left: 275px;
top: 85px;
}

#nav {
background-color: #005296;
position: absolute;
height: 36px;
width: 700px;
top: 125px;
left: -1px;
padding-top: 3px;
text-align: center;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #CCCC99;
z-index:4
}

#nav ul {
padding:0px;
list-style-type:none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 40px;

}

#nav li {
float: left;
position:relative;
list-style-type:none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCC99;
background-color:#005296;
padding-left:33px;
padding-right:33px;
padding-top: 2px;
padding-bottom: 1px;
}

#nav li:first-child {
border-left-width: 1px;
border-left-style: solid;
border-left-color:#CCCC99;
}

#nav li:hover {
background-color:#CCCC99;
}


#nav ul li ul {
margin:0px;
position:absolute;
width:8em;
text-align: center;
left: -1px;
padding-left:0px;
padding-top: 5px;
}

#nav ul li ul li {
width:100%;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #CCCC99;
border-bottom-color: #CCCC99;
border-left-color: #CCCC99;
padding-top:5px;
padding-bottom:5px;
padding-right: 10px;
padding-left: 10px;
}

#nav ul li ul li:first-child {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCC99;
}


body #nav ul li ul {
display:none;
}

#nav u li:hover ul {
display:block;
}

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


* html #nav ul {
float:left;
border-left:1px solid #CCCC99;
margin-left:15px
}

* html #nav ul li ul {
border-top:1px solid #CCCC99;
border-left:0px;
}

#nav a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #FFFFFF;
text-decoration: none;
font-weight: 400;
display:block;
}

#nav a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #C41230;
text-decoration: none;
font-weight: 400;
}

#nav a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #FFFFFF;
text-decoration: none;
font-weight: 400;

}

#leftlist {
position: absolute;
height: 371px;
width: 129px;
left: 0px;
top: 169px;
text-align: right;
padding-right: 10px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #CCCC99;
padding-top: 30px;
}

#leftlist a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #C41230;
text-decoration: none;
font-weight: bold;
}

#leftlist a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #000000;
text-decoration: none;
font-weight: bold;
}


#leftlist a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color: #C41230;
text-decoration: none;
font-weight: bold;
}


#vertical {
height: 570px;
width: 100%;
margin-top: -285px;
margin-left: -50%;
position: absolute;
left: 453px;
top: 50%;
}

#horizontal {
height: 570px;
width: 702px;
margin-right: auto;
margin-left: auto;
position: relative;
}



-->
</style>

</head>

<div id="vertical">
<div id="horizontal">
<!--center white strip containing all content-->
<div id="container">&nbsp;</div>

<div id="search">
<p>Search &nbsp;
<input name="search" type="text" size="20" />
</p>
</div>
<div id="address">
<p> Fort Atkinson, Wisconsin</p>
</div>
<div id="headerlogo"><img src="digistar_logo.gif" alt="Digi-Star logo" width="225" height="54" /></div>


<!--horizontal menu with drop down-->
<div id="nav">
<ul>
<li><a href="#">Company<br />
Information</a>
<ul> <!--drop down menu items-->
<li><a href="#">Press Release</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Map to Digi-Star</a></li>
<li><a href="#">2005 Shows</a></li>
<li><a href="#">Historical Perspective</a></li>
<li><a href="#">Customer service</a></li>
<li><a href="#">Research and Development</a></li>
</ul>
</li>

<li><a href="#">Additional<br />Products</a>
<ul> <!--drop down menu items-->
<li><a href="#">Digi-Star by Norac</a></li>
<li><a href="#">Indicators</a></li>
<li><a href="#">Load Cells</a></li>
<li><a href="#">StockWeigh</a></li>
<li><a href="#">Data Transfer</a></li>
<li><a href="#">DataLink</a></li>
<li><a href="#">Transmitter Receiver</a></li>
<li><a href="#">Remote Displays</a></li>
<li><a href="#">Feed Management Systems</a></li>
<li><a href="#">Software Support</a></li>
</ul>
</li>

<li><a href="#">Technical<br />Support</a>
<ul> <!--drop down menu items-->
<li><a href="#">Contact Information</a></li>
<li><a href="#">Warranty Centers</a></li>
<li><a href="#">Product Notes</a></li>
<li><a href="#">Software Support</a></li>
<li><a href="#">Definitions</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Product Literature</a></li>
<li><a href="#">Product Manuals</a></li>
<li><a href="#">Service Bulletins</a></li>
<li><a href="#">Trouble Shotting Guides</a></li>
</ul>
</li>


<li><a href="#">Document<br />Warehouse</a>
<ul> <!--drop down menu items-->
<li><a href="#">Product Manuals</a></li>
<li><a href="#">Product Literature</a></li>
<li><a href="#">Product Bulletins</a></li>
<li><a href="#">Service Bulletins</a></li>
<li><a href="#">Setup & Calibration</a></li>
<li><a href="#">Technical Manuals</a></li>
<li><a href="#">Technical Support</a></li>
<li><a href="#">Trouble Shooting Guides</a></li>
</ul>
</li>

<li><a href="#">Custom<br />Products</a>
<ul> <!--drop down menu items-->
<li><a href="#">About Us</a></li>
<li><a href="#">Customer Focus</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Industries</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</li>

</ul>


</div>




<!--left menu-->
<div id="leftlist">

<p><a href="#">INDICATORS/<br />REMOTES</a></p>
<p>&nbsp;</p>


<p><a href="#">LOAD CELLS</a></p>
<p>&nbsp;</p>


<p><a href="#">LIVESTOCK<br />WEIGHING</a></p>
<p>&nbsp;</p>


<p><a href="#">DATA MANAGEMENT</a></p>
<p>&nbsp;</p>


<p><a href="#">PRODUCT DEMO</a></p>
</div>





</div>
</div>
</body>
</html>
nataliemac
06-16-2006, 05:04 PM
It's because this:

#nav u li:hover ul {
display:block;
}
won't work in IE. IE only recognizes the :hover pseudo class for <a> elements.

Check out: http://www.alistapart.com/articles/dropdowns

for an explanation and a nifty little JavaScript that will make it work in IE.