CSS: Submenu not working in IE 7,8 & 9 - css

Question

I created sub menus on a website but when I mouse over the parent link, the sub menus are displayed horizontally instead of vertically. They work fine in Chrome and Firefox.
Here's the HTML code for the menu
<div class="suckertreemenu">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li> Overview</li>
<li> What do we deliver? </li>
<li> Our People
<ul>
<li> Management</li>
<li> Consultants</li>
</ul>
</li>
<li>What is it like working with us?</li>
</ul>
</li>
<li>Solutions
<ul>
<li>Business Model
<ul>
<li>Business Consulting</li>
<li>Technology Consulting</li>
<li> Managed Services Consulting</li>
</ul>
</li>
<li>Modus Operandi</li>
</ul>
</li>
<li>Industries</li>
<li>Alliances</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
Here's my CSS code below.
#charset "utf-8";
/* CSS Document */
Body{
margin:0;
padding:0;
background-color:#DCDCDC;
color:#000;
font-family: Arial, Helvetica, sans-serif;
/*font-size:12px;*/
}
.bodytext{
font-size:12px;
}
H1{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#000000;
background-image:url(../images/welc_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
P{
font-size:12px;
}
h3{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#000000;
border-bottom:#FF0000 solid 1px;
padding:5px 5px 5px 5px;
}
.btext{
font-size:12px;
}
H2 a:link{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:active{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 a:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color: #FF0000;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
H2 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#666666;
background-image:url(../images/news_image.jpg);
background-position:left;
background-repeat:no-repeat;
padding-left:12px;
}
.ik img {
background: #ebebeb;
border: solid 1px #d1d1d1;
padding: 5px;
}
#nav{
background-image: url(../images_v2/bg_grad_02.gif);
}
li{
list-style-image: url(../images/bullet2.gif);
font-size:12px;
list-height:30px;
}
.ContactUS
{
color: #FFF;
}
.footer
{
font-size:11px;
color: #000;
}
.businessText {
font-size: 12px;font-size:12px;
color: #FFF;
font-weight:bold
}
.searchText {
font-size: 12px;
color: grey;
}
.partners {
text-align: center;
color:#000;
font-size: 12px;
}
.Block_Headers {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #D9D9D9;
}
.searchBox{
background:url(../images_v2/tboxfill.gif)
}
.suckertreemenu ul{
margin: 0;
padding: 2px 0 0 0;
float: left;
font: 14px Arial;
text-align:left;
height:29px;
z-index:100;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
/*background-color: #F3F3F3;*/ /*overall menu background color*/
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
background:url(../images_v2/navsplit.gif) no-repeat scroll right center transparent;/*Place right border image here*/
font: 14px Arial;
}
.suckertreemenu ul li a:link{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
}
.suckertreemenu ul li a:visited{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
}
.suckertreemenu ul li a:active{
float: left;
color: white;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid white;
background-color: #BD0021;
}
/*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;
font: normal 13px Arial;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
list-style:none;
float: left;
top: 14px;
}
/*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: -16px;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 10px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
border-left: 1px solid ;
background:none;
}
.suckertreemenu ul li ul li a:link{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:visited{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:active{
display: block;
width: 160px; /*width of sub menu levels*/
text-decoration: none;
background-color: #31458C;
color: white;
/*font-weight:normal;*/
padding: 5px 11px;
border-top: 1px solid white;
border-right: 1px solid ;
}
.suckertreemenu ul li ul li a:hover{
background-color: #BD0021;
color: white;
border-bottom: none;
/*font-weight:normal;*/
}
#current{
border-bottom:#AA0B34 solid 3px;
color: white;
}
.suckertreemenu ul li a:hover{
color: red;
}
.suckertreemenu ul li a:active{
border-bottom:#BD0021 solid 3px;
color: white;
/*font-weight:normal;*/
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #31458C url(../images_v2/arrow-right.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* Holly Hack for IE \*/
* html .suckertreemenu ul li ul li { float: left; height: 1%; }
* html .suckertreemenu ul li ul li a { height: 1%; }
/* End */
/* End */

Answer 1

Sir,
You are setting the ul's visibility to hidden but you're not changing its state back to visible on hover, that is why you never see your sub menus.
Put in the following CSS:
.suckertreemenu ul li:hover ul {
visibility: visible;
}
Also, your sub-items display horizontally because they are set to float: left in your CSS.
.suckertreemenu ul li ul li {
list-style:none;
float: left; <------ reset this style!
top: 14px;
}
I hope that helps

Answer 2

I managed to solve it by adding clear:left atrribute to .suckertreemenu ul li ul li property
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
list-style:none;
float: left;
top: 14px;
**clear:left;**
}