...

View Full Version : CSS dropdown menu in IE



Feller
01-03-2008, 08:44 PM
hey all!

I'm constructing a horizontal dropdown menu and like usual, works perfect in FireFox, and not at all in IE. I'm having troubles getting the menu items to display in IE, can anyone offer a suggestion? thanks!

HTML:


<div id="top_nav_container">
<div><img src="images/topnav_top.gif" height="5"></div>
<ul id="topnav">
<li class="top_top"><a href="#" class="drop"><img src="images/nav/btn_ms.jpg" border="0" align="left"></a>
<ul>
<li><a href="#" class="enclose">Getting Started</a></li>
<li><a href="#" class="enclose">Markets We Serve</a></li>
<li><a href="#" class="enclose">Products and Services</a></li>
<li><a href="#" class="enclose">Merchant Resources</a></li>
<li><a href="#" class="enclose">Fraud Protection</a></li>
<li><a href="#" class="enclose">Sent Me information</a></li>
</ul>
</li>
<li class="top_top"><a href="#" class="drop"><img src="images/nav/btn_baa.jpg" border="0" align="left"></a>
<ul>
<li><a href="#" class="enclose">Agent Benefits</a></li>
<li><a href="#" class="enclose">Tools and Recources</a></li>
<li><a href="#" class="enclose">Products and Services</a></li>
<li><a href="#" class="enclose">agent application</a></li>
<li><a href="#" class="enclose">FAQ</a></li>
<li><a href="#" class="enclose">Sent Me information</a></li>
</ul>
</li>
<li class="top_top"><a href="#" class="drop"><img src="images/nav/btn_pas.jpg" border="0" align="left"></a>
<ul>
<li><a href="#" class="enclose">Markets We Serve</a></li>
<li><a href="#" class="enclose">Credit</a></li>
<li><a href="#" class="enclose">Debit</a></li>
<li><a href="#" class="enclose">E-commerce</a></li>
<li><a href="#" class="enclose">Wireless</a></li>
<li><a href="#" class="enclose">Checks</a></li>
<li><a href="#" class="enclose">Gift Cards</a></li>
<li><a href="#" class="enclose">EBT</a></li>
<li><a href="#" class="enclose">Fraud Protection</a></li>
<li><a href="#" class="enclose">Call Centers</a></li>
<li><a href="#" class="enclose">Business to business</a></li>
<li><a href="#" class="enclose">Send me information</a></li>
</ul>
</li>
<li class="top_top"><a href="#" class="drop"><img src="images/nav/btn_au.jpg" border="0" align="left"></a></li>
<li class="top_top"><a href="#" class="drop"><img src="images/nav/btn_po.jpg" border="0" align="left"></a>
<ul>
<li><a href="#" class="enclose">Why Partner with CSI?</a></li>
<li><a href="#" class="enclose">Partner Profiles</a></li>
<li><a href="#" class="enclose">FAQ</a></li>
<li><a href="#" class="enclose">Send Me Information</a></li>
</ul>
</li>
</ul>
</div>


CSS:


body {
background-color: #CCCCCC;
padding: 0;
margin: 0;
}
#top_nav_container {
position: relative;
z-index: 100;
display: block;
padding: 0;
}
#topnav, #topnav ul {
padding: 0;
margin: 0;
list-style: none;
}
#topnav li:hover > ul {
display:block;
position: absolute;
top:-11px;
left:80px;
padding: 10px 30px 30px 28px;
width: 120px;
}
#topnav a, #topnav a:visited {
font-family: Verdana, Arial, helvetica;
display: block;
font-size: 10px;
color: #387cae;
height: 25px;
line-height: 24px;
text-decoration: none;
text-indent: 5px;
}
#topnav a.enclose:hover {
background-color: #387cae;
color:#FFF;
padding: 0px;
}
#topnav a.drop:hover, #topnav a.drop:link {
background-color: #FFFFFF;
height: 34px;
}
#topnav a.enclose {
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}
#topnav .enclose {
width: 120px;
font-family: Verdana, Arial, helvetica;
display:block;
font-size: 10px;
color: #387cae;
height:25px;
line-height:24px;
text-decoration:none;
}
#topnav li {
float:left; background-color: #d4e6ef;
}
#topnav li:hover {
position:relative;
}
#topnav li ul {
display: none;
}
#topnav > li:hover > ul {
left: -30px;
top: 24px;
}
.drop {
background-color: #FFFFFF;
float: left;
}



I really appreciate any help you can give!

-Dan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum