IE8 IE9 drop down menu inline error -

my css menu bar has little problem. bar works fine in other major browsers including ie10, not in ie 8 or 9. seem float or inline-block being ignored. shown stacked on top of 1 instead of side side. if have ie 8 or 9 can view problem @ kitchenova.com. have made jsfiddle of menu bar: http://jsfiddle.net/blzzl/

ie pain!

#cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu {   margin: 0;   padding: 0;   position: relative;   font-family:verdana, geneva, sans-serif } #cssmenu {     height: 30px;     border-radius: 5px 5px 0 0;     -moz-border-radius: 5px 5px 0px 0px;     -webkit-border-radius: 5px 5px 0 0;     background: #e0e0e0;     background: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e0e0));     background: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);     background: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);     background: -ms-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);     background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);     border-bottom: 2px solid #eb2226;     z-index:999; } #cssmenu:after, #cssmenu ul:after {   display: inline-block;   float:left;  } #cssmenu {   background: #e0e0e0;   background: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e0e0e0));   background: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);   background: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);   background: -ms-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);   background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);   color: #000000;   display: inline-block;   font-family: verdana, geneva, sans-serif   font-size: 15px;   line-height: 29px;   padding: 0 20px;   text-decoration: none; } #cssmenu ul {   list-style: none; } #cssmenu > ul {   float: left; } #cssmenu > ul > li {   float: left; } #cssmenu > ul > li:hover:after {   content: '';   display: block;   width: 0;   height: 0;   position: absolute;   left: 50%;   bottom: 0;   border-left: 10px solid transparent;   border-right: 10px solid transparent;   border-bottom: 10px solid #eb2226;   margin-left: -10px; } #cssmenu > ul > li:first-child > {   border-radius: 5px 0 0 0;   -moz-border-radius: 5px 0 0 0;   -webkit-border-radius: 5px 0 0 0; } #cssmenu > ul > li:last-child > {   border-radius: 0 5px 0 0;   -moz-border-radius: 0 5px 0 0;   -webkit-border-radius: 0 5px 0 0; } #cssmenu > ul > li.active > {  } #cssmenu > ul > li:hover > {   background: #070707;   background: -moz-linear-gradient(top, #ffffff 0%, #bbbdbf 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #bbbdbf));   background: -webkit-linear-gradient(top, #ffffff 0%, #070707 100%);   background: -o-linear-gradient(top, #ffffff 0%, #bbbdbf 100%);   background: -ms-linear-gradient(top, #ffffff 0%, #bbbdbf 100%);   background: linear-gradient(to bottom, #ffffff 0%, #bbbdbf 100%);   box-shadow: inset 0 0 3px #000000;   -moz-box-shadow: inset 0 0 3px #000000;   -webkit-box-shadow: inset 0 0 3px #000000; } #cssmenu .has-sub {   z-index: 1; } #cssmenu .has-sub:hover > ul {   display: block; } #cssmenu .has-sub ul {   display: none;   position: absolute;   width: 200px;   top: 100%;   left: 0; } #cssmenu .has-sub ul li {   *margin-bottom: -1px; } #cssmenu .has-sub ul li {   background: none repeat scroll 0 0 #e5e5e5;   border-bottom: 1px dotted #000000;   filter: none;   font-size: 12px;   display: block;   line-height: 120%;   padding: 10px; } #cssmenu .has-sub ul li:hover {   background: #eb2226;   color:#fff; } #cssmenu .has-sub .has-sub:hover > ul {   display: block; } #cssmenu .has-sub .has-sub ul {   display: none;   position: absolute;   left: 100%;   top: 0; } #cssmenu .has-sub .has-sub ul li {   background: #0c7fb0;   border-bottom: 1px dotted #6db2d0; } #cssmenu .has-sub .has-sub ul li a:hover {   background: #095c80; } 

this list applies to:

<link href="assets/templates/v32029/css/dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />   <div id='cssmenu' style="position:relative;"> <ul>    <li class='active has-sub'><a href='http://www.kitchenova.com/bakeware_c_8.html'><span>bakeware</span></a>       <ul>          <li><a href='http://www.kitchenova.com/measuring-tools_c_407.html'><span>measuring tools</span></a></li>          <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=catsbakeware%3bbaking%20%26%20pastry%20tools'><span>baking , pastry tools</span></a></li>          <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=catsbakeware%3bcookie%20%26%20biscut%20cutters'><span>cookie , biscuit cutters</span></a></li>          <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=catsbakeware%3bdecorating%20tools'><span>decorating tools</span></a></li>          <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=catsbakeware%3bpans%2c%20molds%2c%20%26%20sheets'><span>pans, molds, , sheets</span></a></li>          <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=catsbakeware%3bbaking%20dishes'><span>baking dishes</span></a></li>          <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=catsbakeware%3bsilicone%20bakeware'><span>silicone bakeware</span></a></li>          <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=catsbakeware%3bmixing%20%26%20prep%20bowls'><span>mixing , prebowls</span></a></li>       </ul> 

on html code used 1 table above

<link href="assets/templates/v32029/css/dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" /> 

just need set it's width 100%