As always, it looks good in firefox, opera, safari, and ie7 but not in ie6. This is what my menu is suppose to look like:
http://i38.photobucket.com/albums/e120/swaters210/menugood.png
As you can see it’s your standard horizontal dropdown menu and I followed the suckerfish menu tutorial found on alistapart.com. It was working fine until I tried styling the child uls on my own. This is the result in IE6:
http://i38.photobucket.com/albums/e120/swaters210/menubad.png
Here’s my HTML:
<div id="mainnav">
<ul id="nav">
<li><A href="default.aspx" title="Home">Home</a></li>
<li><a href="aboutus.aspx" title="About Us">About Us</a>
<ul>
<li><a href="ourhistory.aspx" title="Our History">Our History </a></li>
<li><a href="awards.aspx" title="Awards">Awards</a></li>
<li><a href="ourstaff.aspx" title="Our Staff">Our Staff</a></li>
</ul>
</li>
<li><a href="services.aspx" title="Services">Services</a>
<ul>
<li><a href="methodology.aspx" title="Implementation">Implementation</a></li>
<li><a href="training.aspx" title="Training">Training</a></li>
<li><a href="tailoredreporting.aspx" title="Tailored Reporting">Tailored Reporting</a></li>
<li><a href="support.aspx" title="Support">Support</a></li>
<li><a href="customprogram.aspx" title="Custom Programming Solutions">Custom Programming Solutions</a></li>
<li><a href="workflow.aspx" title="Workflow Analysis">Workflow Analysis</a></li>
<li><a href="clientcare.aspx" title="Sage Client Care">Sage Client Care</a></li>
</ul>
</li>
<li><a href="products.aspx" title="Products">Products</a>
<ul>
<li><a href="accounting.aspx" title=Accounting">Accounting</a></li>
<li><a href="sagecrm.aspx" title="Sage CRM">Sage CRM</a></li>
<li><a href="ecommerce.aspx" title="eCommerce">eCommerce</a></li>
<li><a href="fixedassets.aspx"title="Fixed Assets">FAS</a></li>
<li><a href="humanresourcemanagment.aspx" title="Human Resource Management">Human Resource Management</a></li>
<li><a href="servicejob.aspx" title="Job Cost & Service">Job Cost & Service</a></li>
<li><a href="businessintelligence.aspx" title="Busienss Intelligence">Business Intelligence</a></li>
<li><a href="warehousesolutions.aspx" title="Warehouse Managment Solutions">Warehouse Management Solutions</a></li>
<li><a href="manufacturingsol.aspx" title="Manufacturing Solutions">Manufacturing Solutions</a></li>
<li><a href="pointofsale.aspx" title="Point of Sale">Point of sale</a></li>
<li><a href="addsageapps.aspx" title="More Applications & Solutions">Additional Sage Accpac Applications</a></li>
</ul>
</li>
<li><a href="career.aspx">Careers</a></li>
<li><a href="support.aspx">Support</a></li>
<li><a href="contact.aspx">Contact</a>
<ul>
<li><a href="reps/miami.aspx" title="Miami Representatives">Miami Representatives</a></li>
<li><a href="reps/newyork.aspx" title="New York Representatives">New York Representatives</a></li>
<li><a href="reps/tampabay.aspx" title="Tampa Bay Representatives">Tampa Bay Representatives</a></li>
<li><a href="reps/neworleans.aspx" title="New Orleans Representatives">New OrleansRepresentatives</a></li>
<li><a href="reps/orlando.aspx" title="Orlando Representatives">Orlando Representatives</a></li>
</ul>
</li>
</ul>
</div>
and the CSS:
/*Main Menu, made using Suckerfish technique*/
#mainnav{
width:832px;
height:30px;
background:#000;
color:#fff;
margin:0 auto;
background-image:url(../images/navx.png);
background-position:top left;
background-repeat:repeat-x;
}
#mainnav ul {
padding: 0;
margin: 0;
list-style: none;
background:#122742;
color:#fff;
text-align:left;
}
#mainnav ul li {
float: left;
position: relative;
padding-left:2em;
padding-top:.4em;
}
#mainnav ul li ul li{
width:25em;
padding:0;
padding:.5em;
border-bottom:1px #18314F solid;
}
#mainnav li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}
#mainnav li > ul {
top: auto;
left: auto;
}
#mainnav li:hover ul, #mainnav li.over ul{ display: block; }
#mainnav li a:link, #mainnav li a:visited{
color:#fff;
text-decoration:none;
width:15em;
padding:10px;
}
#mainnav li a:hover{
color:#ccc;
text-decoration:underline;
}
#mainnav ul#nav li ul {
position:absolute;
left:20px;
top:20px;
}
#mainnav ul#nav li ul li a:hover{
width:15em;
}
I can post the rest of the CSS if you like, I didn’t have enough characters left in this post. I don’t know, something could be overriding my css rules of the menu? the positioning was off in IE7 until I set a absolute position to the ul tags. Also, where can I find more resources / tutorials on suckerfish and is there a generator for it. I can never get horizontal drop down menus working right. I don’t want to resort to obtrusive javascript and conditional statements or complicate the html structure by adding td tags as I’ve seen in other tutorials on the net.