SubMenus not displayed properly......

[tharini]

I have designed a html page with menus and sub menus....The Sub menus are displayed properly in firefox but in IE its not working....Please give me some suggestions...
The html code is:

 
 
 <li class="topitem"><a href="#" title="DECORATIVE GYPSUM"><span>DECORATIVE GYPSUM</span></a>
            <ul>
              <li class="subfirst"><a href="#" title="Cornices"><span>Cornices</span></a>
                  <ul>
                    <li class="subfirst"><a href="designcornices.html" title="Design Cornices">Design Cornices</a></li>
                    <li><a href="plaincornices.html" title="Plane Cornices">Plane Cornices</a></li>
                    <li><a href="jfcornices.html" title="JF Cornices">JF Cornices</a></li>
                    <li><a href="roundcornices.html" title="Round Cornices">Round Cornices</a></li>
                  </ul>
              </li>
              <li><a href="#" title="Moulding"><span>Moulding</span></a>
                  <ul>
                    <li class="subfirst"><a href="plainemouldings.html" title="Plain Moulding">Plain Moulding</a></li>
                    <li><a href="desingmouldings.html" title="Design Moulding">Design Moulding</a></li>
                    <li><a href="roundmouldings.html" title="Round Moulding">Round Moulding</a></li>
                  </ul>
              </li>
              <li><a href="#" title="Center Panels"><span>Center Panels</span></a>
                  <ul>
                    <li class="subfirst"><a href="centerpanels.html" title="Center Panels">Center Panels</a></li>
                    <li><a href="ceiling_l-panels.html" title="Ceiling L Panel">Ceiling L Panel</a></li>
                    <li><a href="domes.html" title="Domes">Domes</a></li>
                  </ul>
              </li>
              <li><a href="#" title="Decorative"><span>Decorative</span></a>
                  <ul>
                    <li class="subfirst"><a href="nishes.html" title="Niches">Niches</a></li>
                    <li><a href="wallpanels.html" title="Wall Panels">Wall Panels</a></li>
                    <li><a href="arcelements.html" title="Arch Elements">Arch Elements</a></li>
                    <li><a href="areches.html" title="Arches">Arches</a></li>
                    <li><a href="fireplace.html" title="Fire Place">Fire Place</a></li>
                  </ul>
              </li>
              <li><a href="#" title="Pillars"><span>Pillars</span></a>
                  <ul>
                    <li class="subfirst"><a href="pillars.html" title="Pillars">Pillars</a></li>
                    <li><a href="brackets.html" title="Brackets">Brackets</a></li>
                    <li><a href="capitals.html" title="Capital">Capital</a></li>
                    <li><a href="pediment.html" title="Pediment">Pediment</a></li>
                  </ul>
              </li>
              <li><a href="dtechnical.html" title="Technical Specification">Technical Specification</a></li>
            </ul>
          </li>
        <li class="topitem"><a href="#" title="CEILING "><span>CEILING </span></a>
            <ul>
              <li class="subfirst"><a href="grgceilingtiles.html" title="GRG Ceiling Tiles">GRG Ceiling Tiles</a></li>
              <li><a href="grgfully.html" title="GRG Fully Perforated">GRG Fully Perforated</a></li>
              <li><a href="mineralhigh.html" title="Mineral Fibre Ceiling Tiles(High Density)">Mineral Fibre Ceiling Tiles(High Density)</a></li>
              <li><a href="minerallow.html" title="Mineral Fibre Ceiling Tiles(Low Density)">Mineral Fibre Ceiling Tiles(Low Density)</a></li>
            </ul>
          </li>
        <li class="topitem"><a href="#" title="SUSPENSION SYSTEM"><span>SUSPENSION SYSTEM</span></a>
            <ul>
              <li class="subfirst"><a href="aluminiumsilhouette.html" title="Aluminum Silhouette (16x32)">Aluminum Silhouette (16x32)</a></li>
              <li><a href="gi15x42.html" title="G.I. Silhouette (15x42)">G.I. Silhouette (15x42)</a></li>
              <li><a href="gi15x30.html" title="G.I. Plain(15x30)">G.I. Plain(15x30)</a></li>
              <li><a href="gi24x32.html" title="G.I. Plain(24x32)">G.I. Plain(24x32)</a></li>
              <li><a href="gi24x38.html" title="G.I. Plain(24x38)">G.I. Plain(24x38)</a></li>
              <li><a href="aluminiumgrid.html" title="Aluminum Grid Silhouette">Aluminum Grid Silhouette</a></li>
            </ul>
          </li>
        <li class="topitem"><a href="#" title="FLOORING"><span>FLOORING</span></a>
            <ul>
              <li class="subfirst"><a href="range.html" title="Range &amp; Dimsnsions">Range & Dimsnsions</a></li>
              <li><a href="accessories.html" title="Accessories">Accessories</a></li>
              <li><a href="additional.html" title="Additional Accessories">Additional Accessories</a></li>
              <li><a href="ftechnical.html" title="Technical Specification">Technical Specification</a></li>
            </ul>
          </li>
        <li class="topitem"><a href="#" title="FOILS"><span>FOILS</span></a>
            <ul>
              <li class="subfirst"><a href="wooden.html" title="Wooden Foils">Wooden Foils</a></li>
              <li><a href="kinder.html" title="Kinder Foils">Kinder Foils</a></li>
              <li><a href="decorative.html" title="Decorative Foils">Decorative Foils</a></li>
              <li><a href="glass.html" title="Glass Foils">Glass Foils</a></li>
              <li><a href="nature.html" title="Nature Foils">Nature Foils</a></li>
              <li><a href="writingboard.html" title="Writing Board &amp; Cork Foils">Writing Board &amp;amp; Cork Foils</a></li>
              <li><a href="gold_silver.html" title="Special Gold/Silver Foils">Special Gold/Silver Foils</a></li>
              <li><a href="uni.html" title="Uni Foils">Uni Foils</a></li>
              <li><a href="decoborders.html" title="Deco Borers">Deco Borers</a></li>
              <li><a href="decostickers.html" title="Deco Stickers">Deco Stickers</a></li>
              <li><a href="vitroborders.html" title="Vitro Borders">Vitro Borders</a></li>
              <li><a href="installations.html" title="Installations">Installations</a></li>
            </ul>
          </li>
 
 
 

The css code is given below:

 
ul#css3menu,ul#css3menu ul{
    margin:0;list-style:none;background-color:#000;background-image:url("menubk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
ul#css3menu ul{
    display:none;position:absolute;left:-1px;top:98%;-moz-box-shadow:0.7px 1px 1px #777777;-webkit-box-shadow:0.7px 1px 1px #777777;box-shadow:0.7px 1px 1px #777777;padding:0 9px 9px;background-color:#333;background-image:none;border-width:1px;border-style:solid;border-color:#5A5E60;}
ul#css3menu li:hover>*{
    display:block;}
ul#css3menu li:hover{
    position:relative;}
ul#css3menu ul ul{
    position:absolute;left:98%;top:-2px;}
ul#css3menu{
    padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
ul#css3menu li{
    display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
    margin:0 0 0 1px;}
ul#css3menu ul>li{
    margin:1px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
    outline-style:none;}
ul#css3menu a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("menubk.png");background-position:0 50%;border-width:0px;border-style:none;border-color:#6655FF;}
ul#css3menu ul li{
    float:none;margin:9px 0 0;}
ul#css3menu ul a{
    text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;font:13px Arial,sans-serif;color:#cccccc;text-decoration:none;}
ul#css3menu li:hover>a{
    background-color:#00aaff;border-color:#665500;border-style:none;font:12px Arial;color:#ffffff;text-decoration:none;background-image:url("menubk.png");background-position:0 100%;}
ul#css3menu img{
    border:none;vertical-align:middle;margin-right:20px;width:24px;height:24px;}
ul#css3menu ul img{
    width:6px;height:12px;}
ul#css3menu img.over{
    display:none;}
ul#css3menu li:hover > a img.def{
    display:none;}
ul#css3menu li:hover > a img.over{
    display:inline;}
ul#css3menu span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:41.5px;}
ul#css3menu ul span{
    background-image:url("arrow.gif");padding-right:27px;}
ul#css3menu ul li:hover>a{
    background-color:#333;background-image:none;border-style:solid;border-color:#262626;font:13px Arial,sans-serif;color:#1F80AE;text-decoration:none;}
ul#css3menu li.topfirst>a{
    height:16px;line-height:16px;border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px 0 0 0px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.topfirst:hover>a{
    line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.topitem>a{
    height:16px;line-height:16px;text-shadow:#000000 0px -1px 1px; text-align:center;}
ul#css3menu li.topitem:hover>a{
    line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu._>li>a{
    padding:0;}
ul#css3menu li.subfirst>a{
    background-color:#333;background-image:none;border-width:0;border-style:none;padding:0;font:13px Arial,sans-serif;color:#cccccc;text-decoration:none;}
ul#css3menu li.subfirst:hover>a{
    background-color:#333;background-image:none;border-style:none;font:13px Arial,sans-serif;color:#1F80AE;text-decoration:none;}
ul#css3menu li.toplast>a{
    height:16px;line-height:16px;border-radius:0 0px 0px 0;-moz-border-radius:0 0px 0px 0;-webkit-border-radius:0 0px 0px 0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.toplast:hover>a{
    line-height:16px;text-shadow:#3d3d3d 0px -1px 1px;}
 

[kovik]

You cannot have a pure CSS dropdown navigation in old versions of IE (namely IE6). <li> elements cannot have a :hover psuedo-class as far as IE is concerned. Also, IE6 does not recognize the direct-child selector (">"). I've forgotten how much IE7 is aware of right now, but some of this is probably incompatible there as well.