title: CSS: Submenu not working in IE 7,8 & 9
body: <p>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. </p>
  
  <p>Here's the HTML code for the menu</p>
  
  <pre><code>&lt;div class="suckertreemenu"&gt;
                  &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt; Overview&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt; What do we deliver? &lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt; Our People&lt;/a&gt;
                          &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt; Management&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt; Consultants&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;What is it like working with us?&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Solutions&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Business Model&lt;/a&gt;
                          &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Business Consulting&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Technology Consulting&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt; Managed Services Consulting&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Modus Operandi&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Industries&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Alliances&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  </code></pre>
  
  <p>Here's my CSS code below.</p>
  
  <pre><code>@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 */
  </code></pre>