Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS
My CSS Menu bar has a little problem. The bar works fine in all the other major browsers including IE10, but not in IE 8 or 9. It seem like the float or the inline-block is being ignored. They are shown as stacked on top of one another instead of side by side. If you have IE 8 or 9 you can view the problem at kitchenova.com. I have made a jsfiddle of the menu bar: http://jsfiddle.net/bLZzL/
 
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  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 a {
  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 > a {
  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 > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
 
}
#cssmenu > ul > li:hover > a {
  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 a {
  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 a {
  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 a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}
 


And this is the List it applies to:

Note the external style sheet is the code above.
 
<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />
 

<div id='cssmenu' style="removed: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 and 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 and 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, and 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 and Prebowls</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='http://www.kitchenova.com/Cookware_c_148.html'><span>Cookware</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bNon-Stick%20%26%20Specialty%20Cookware'><span>Non-Stick & Specialty Cookware</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bSilicone%20Cookware'><span>Silicone Cookware</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bMicrowave%20Cookware'><span>Microwave Cookware</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCookware%3bPot%20Racks'><span>Pot Racks</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='http://www.kitchenova.com/Cooks-Tools_c_9.html'><span>Cook's Tools</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bCooking%20Utensils%20%26%20Accessories'><span>Cooking Utensils & Accessories</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bMeasuring%20Cups%20%26%20Spoons'><span>Measuring Cups & Spoons</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bMixing%20%26%20Prep%20Bowls'><span>Mixing & Prepbowls</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bColanders%20%26%20Strainers'><span>Colanders & Strainers</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bCanning%20%26%20Preserving'><span>Canning & Preserving</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bCan%2c%20Jar%2c%20%26%20Bottle%20Accessories'><span>Can, Jar, and Bottle Accessories</span></a></li>
         <li><a href='http://www.kitchenova.com/Graters-Zesters-Peelers_c_27.html'><span>Graters, Zesters, and Peelers</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bChoppers%20%26%20Slicers'><span>Choppers & Slicers</span></a></li>
         <li><a href='http://www.kitchenova.com/Garnishing-Styling_c_33.html'><span>Garnishing & Styling</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bMeat%20%26%20Seafood%20Tools'><span>Meat & Seafoods</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCook%27s%20Tools%3bSpecialty%20Gadgets'><span>Specialty Gadgets</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/Timers-Thermometers-Scales_c_28.html'><span>Timers, Thermometers , & Scales</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='http://www.kitchenova.com/Cutlery_c_13.html'><span>Cutlery</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bCeramic%20Knives'><span>Ceramic Knives</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bChef%20%26%20Santoku'><span>Chef & Santoku</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bSpecialty%20Cutlery'><span>Specialty Cutlery</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bKnife%20Sets'><span>Knife Sets</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bSharpeners%20%26%20Storage'><span>Sharpeners and Storage</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSCutlery%3bCutting%20Boards'><span>Cutting Boards</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='http://www.kitchenova.com/Bar-Cafe_c_10.html'><span>Bar & Cafe</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bAerators%20%26%20Decanters'><span>Aerators and Decanters</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bWine%20%26%20Bar%20Tools'><span>Wine & Bar Tools</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bWine%20Racks%20%26%20Storage'><span>Wine Racks & Storage</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bCoffee%20%26%20Tea'><span>Coffee & Tea</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bBeverage%20Tools'><span>Beverage Tools</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBar%20%26%20Cafe%3bIce%20Trays'><span>Ice Trays</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='http://www.kitchenova.com/Outdoor-Entertaining_c_12.html'><span>Outdoor & Entertaining</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bGrilling%20%26%20Camping'><span>Grilling and Camping</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bPicnic%20%26%20Boating'><span>Picnic & Boating</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bHerbs%20%26%20Garden'><span>Herbs & Garden</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSOutdoor%20%26%20Entertaining%3bFun%20%26%20Novelty'><span>Fun & Novelty</span></a></li>
      </ul>
   </li>
   <li class='has-sub last'><a href='http://www.kitchenova.com/Homekeeping_c_11.html'><span>Homekeeping</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bTabletop%20%26%20Serverware'><span>Tabletop & Serverware</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bPot%20Racks'><span>Pot Racks</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bStorage%20%26%20Organization'><span>Storage & Organization</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bFloor%20Mats%20%26%20Rugs'><span>Floor Mats & Rugs</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bScales'><span>Scales</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSHomekeeping%3bBath%20%26%20Cleaning'><span>Bath & Cleaning</span></a></li>
      </ul>
   </li>
</ul>
</div>
Posted 12-Aug-13 8:02am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,
 
I found solution for you main issue
"They are shown as stacked on top of one another instead of side by side."

On you HTML code you used one TABLE above "<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />", you just need to set it's width 100% like
 
I Checked your HTML and CSS both. You used CSS3 and this is will not work in IE7 and IE8. To use CSS3 properties in IE7 and IE8 you need PIE.htc[^] file.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 464
1 CHill60 415
2 OriginalGriff 345
3 PIEBALDconsult 245
4 BillWoodruff 183


Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 12 Aug 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100