Here is mine and I sure hope I copied all that you need to make yours work. :D
CSS
/* Common Styling */
.menu {
/*float: right;*/
top: -10px;
position: relative;
display: block;
z-index: 99;
padding: 0px 0px 0px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 630px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* top/bottom right/left */
}
.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}
.menu ul li {
/* margin: 0 2px 0 2px; */ /* adds space between main menu boxes */
float:left; /* WARNING: float right reverses menu */
position:relative !important; /* ***** Carbonite fix ***** */
}
.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 1em; /* main buttons */
color: #fff; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 100px; /* main box width */
height: 2px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
/* border-width: 1px 1px 1px 1px; */
background: #4372AA; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}
* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}
.menu ul li ul {
display: none;}
/* */
/* Specific to Non-IE browsers */
/* */
.menu ul li:hover a {
color: #fff; /* main when hover DD */
background: #000; /* main when hover DD */
}
.menu ul li:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: -8px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display: block;
background: #4372AA; /* DD FO non-hover */
color: #fff; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
border-bottom: 1px solid #ccc;
}
.menu ul li:hover ul li a:hover {
background: black; /* DD FO hover */
color: #fff; /* DD FO hover */
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}
/* */
/* Specific to IE browsers */
/* */
.menu ul li a:hover {
/* text-decoration: none; */ /* might be needed */
color: #fff; /* main hover */
background: #000; /* main hover */
}
.menu ul li a:hover ul {
display: block;
position: absolute !important; /* ***** Carbonite fix ***** */
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}
.menu ul li a:hover ul li a {
display: block;
background:#4372AA; /* IE DD color non-hover */
color: #fff; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
border-bottom: 1px solid #ccc;
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}
.menu ul li a:hover ul li a:hover {
background: #000; /* DD FO hover */
color: #fff; /* DD FO hover */
}
.menu ul li a:hover ul li a:hover ul {
display: block;
position: absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}
/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top: 30px;
t\op: 31px; /* IE gap between main bar and the dropdown items */
}
/* style the table so that it takes no part in
the layout - required for IE to work */
.menu table {
position:absolute;
top:auto 0; left:0;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a {
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}
/*END EXTRA ADDS FOR IE*/
/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}
/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}
/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}
/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}
/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}
/* ==== END NAVBAR CODE ==== */
HTML
<div id="my_header">
<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" border="0" height="125" width="500">
</a>
</div> <!-- closes my_banner -->
<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="/Information">Information
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/gallery/6068624_xGLPp">Contat Me</a></li>
<li><a href="/gallery/6068670_FziYu">Hire Me</a></li>
<li><a href="/gallery/6068646_ZqRWw">About Me</a></li>
<li><a href="/gallery/6064626_Cw7BU">Guestbook</a></li>
<li><a href="http://www.ibjcblog.com/">IBJC Blog</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/galleries">Galleries
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Sports">Sports</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Seniors">Seniors</a></li>
<li><a href="/Special%20Creations">Special Creations</a></li>
<li><a href="/Family-Friends">Friends & Family</a></li>
<li><a href="/East%20TN%20Places">East Tennessee</a></li>
<li><a href="/Events">Events</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="/Sports">Sports
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="/Sports">All Sports</a></li>
<li><a href="/Sports/789345">AHS Football</a></li>
<li><a href="/Sports/AHS-Volley">AHS Volleyball</a></li>
<li><a href="/Sports/655181">AHS Basketball</a></li>
<li><a href="/Sports/729365">AHS Baseball</a></li>
<li><a href="/Sports/734755">AHS Softball</a></li>
<li><a href="/Sports/Alcoa-Middle-Sports-2009-2010">AMS Sports</a></li>
<li><a href="/Sports/755456">AMS Baseball</a></li>
<li><a href="/Sports/733303">AYB Baseball</a></li>
<li><a href="/Sports/Ice-Hockey">Ice Hockey</a></li>
<li><a href="/Sports/628330">Sport Style</a></li>
<li><a href="/Sports/693190">Albums Styles</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="http://alcoasports.blogspot.com/">News-Links
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://alcoasports.blogspot.com/">Alcoa Photo-News</a></li>
<li><a href="/gallery/6224978_q3BCn">Calendar</a></li>
<li><a href="http://alcoafootball.net/">alcoaFootball</a></li>
<li><a href="#nopick">new links coming</a></li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="http://www.imagesbyjeniferclark.com/find">Search</a></li>
</li>
</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div> <!-- closes navcontainer -->
</div> <!-- closes my_header -->