为什么我的菜单在IE上显示为垂直而不是水平？

Question

So basically I have a simple menu that is not displaying correctly in IE at all.

Have visited another few posts that has this same problem, although they didn't seem to work.

Here is my HTML:

<div id="topnav">

<ul>
        <a href="#" title="Car Sales"><li>Car Sales</li></a>
        <a href="#" title="Boat Sales"><li>Boat Sales</li></a>
        <li>Caravan Sales</li>
        <a href="#" title="Truck Sales"><li>Truck Sales</li><a>
        <a href="#" title="Equipment Sales"><li>Equipment Sales</li></a>
        <a href="#" title="Bike Sales"><li>Bike Sales</li></a>
</ul>

</div>

Here is my CSS:

#topnav
{
text-align:center;
width:100%;
background-color:#ffffff;
}



#topnav ul a li
{
display:inline-block;
font: 12px/18px sans-serif;
color:#000000;
}

#topnav ul {
width:100%;
  text-align: left;
  display: inline;
  margin: 0;
  padding: 0px;
  list-style: none;

}
#topnav ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 5px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#topnav ul li:hover {
  background: #555;
  color: #fff;
}

#topnav ul li a:hover{ color:#ffffff; }

#topnav ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#topnav ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
#topnav ul li ul li:hover { background: #666; }
#topnav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

JSfiddle: http://jsfiddle.net/menEk/1/

All help and suggestions would be greatly appreciated.

Answer 1

Your HTML code is wrong!

try it:

<ul>
        <li><a href="#" title="Car Sales">Car Sales</a></li>
        <li><a href="#" title="Boat Sales">Boat Sales</a></li>
        <li>Caravan Sales</li>
        <li><a href="#" title="Truck Sales">Truck Sales<a></li>
        <li><a href="#" title="Equipment Sales">Equipment Sales</a></li>
        <li><a href="#" title="Bike Sales">Bike Sales</a></li>
</ul>

and

#topnav ul li a
{
display:inline-block;
font: 12px/18px sans-serif;
color:#000000;
}

Tha a tag should be in li tag!

Answer 2

If you gave #topnav an exact width such as 100px and gave each li in it a width of 100% they would be forced to align vertically.

I have made a JS Fiddle to show it. Changed css widths have:

/* CHANGED */

above them.

http://jsfiddle.net/menEk/2/