First of all, this is the site I am working on, for reference if needed:
Sailor Pens US
Now, the problem is this:
The page works fine in Firefox and IE7, etc.
But it doesnt work in IE6. The navbar gets messed up.
Here is the css for it:
<code>
/*Credits: Dynamic Drive CSS Library */
/*URL:
Dynamic Drive CSS Library- Practical CSS codes and examples */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font-size: small;
font-style: normal;
z-index: 50;
}
/* top level list items */
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
height: 1%;
background-color: #FFFFFF; /* overall menu background color */
}
/* top level link items */
.suckertreemenu ul li a, h2.widgettitle{
display: block;
width: auto;/*96%;*/ /* width of top level link items */
padding: 1px 8px;
border: 0; /*1px solid black;
border-left-width: 0;*/
border-top: 0;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
height: 1%;
}
/* 1st sub level menu */
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
/* sub level list items (undo style from top level list items) */
.suckertreemenu ul li ul li{
display: list-item;
/*float: none;*/
float: left;
height: 1%;
}
/* all subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /* width of sub menu levels */
color: #000000;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}
.suckertreemenu ul li a:hover, h2.widgettitle:hover {
background-color: black;
color: white;
cursor: pointer;
height: 1%;
}
/* background image for top level list links */
.suckertreemenu .mainfoldericon{
background-color: #FFFFFF;
/*background: #FFFFFF url(images/arrow-down.gif) no-repeat center right;*/
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */
/* background image for subsequent level list links */
.suckertreemenu .subfoldericon{
background-color: #FFFFFF;
/*background: #FFFFFF url(images/arrow-right.gif) no-repeat center right;*/
}
<script type="text/javascript">
<!--
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive:
Dynamic Drive CSS Library- Practical CSS codes and examples
var menuids=["treemenu1","treemenu2"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
-->
</script>
<code>
I am almost positive that the problem is at the /* top level link items */ area where it is
width:auto;
I have read that this doesnt work in IE6. So I attempted to just use width:100%
This works in Firefox, too. But in IE6 it is setting each item to a width 100% of the entire bar area. If I set it to 50%, for example, then each item will take up 1/2 of a line of the bar area.
I am really a newbie at php and stuff of this sort. Any help would be greatly appreciated!
IE6 and width:auto problems 
Linear Mode
