水平CSS导航在IE7中显示为垂直

我在IE7中遇到了一个问题——所有顶级导航都是垂直堆叠的，而不是水平堆叠的

这是CSS

#navigation { width:800px; height:27px; background-image:url(images/navbg.gif); background-   repeat:no-repeat; margin-top:30px; }
#navigation ul { margin:0px; padding:0px;  font-family: Arial, Helvetica, sans-serif; font-size: 12px;line-height: 27px; display:inline; }
#navigation ul li { display:inline; float:left; list-style:none; height:27px; line-height:27px; position:relative; }
#navigation li a { color:#a1c301; text-decoration:none; padding-right:10px; padding-left:10px; }
#navigation  li a:hover, #navigation li:hover a { color:#fff; background-color: #91b000; display:inline-block; }

#navigation li ul { margin:0px; padding:0px;  display:none; position:absolute; left:0px; top:27px; background-color:#5b5b52;}
#navigation li:hover ul { display:block; width:150px;}
#navigation li li a { color:#a1c301; text-decoration:none; }
#navigation li li a:hover, #navigation li li:hover a { color:#fff; background-color: #91b000; width:130px; display:inline-block;}
#navigation li.top { }
#navigation li.top a:hover { }
#navigation ul.submenu { background-color:#5b5b52;  }
#navigation li.submenu { width:150px; border: 1px dotted #999; background-color:#5b5b52; }
#navigation .submenu li a { background:#5b5b52; }

这是HTML

<div id="navigation">
<ul class="top">
<li class="top">&nbsp;&nbsp;&nbsp;&nbsp;</li>
<li class="top"><a href="">Home</a></li>
<li class="top"><a href="">Acupuncture</a></li>
<li class="top"><a href="">Chinese Medicine</a>
  <ul class="submenu">
        <li class="submenu"><a href="">Herbal Medicine</a></li>
        <li class="submenu"><a href="">Other Modalities</a></li>
    </ul>
</li>
<li class="top"><a href="">Conditions Treated</a></li>
<li class="top"><a href="">About</a>
 <ul class="submenu">
        <li class="submenu"><a href="">Deb Valentin Bio</a></li>
        <li class="submenu"><a href="">FAQs</a></li>
        <li class="submenu"><a href="">Community Resources</a></li>

    </ul>
   </li>
 <li class="top"><a href="">Testimonials</a></li>
<li class="top"><a href="">Blog</a></li>
<li class="top"><a href="">Schedule an Appointment</a></li>
</ul>
</div>

ie7不理解：将鼠标悬停在锚以外的元素上，也不知道显示：内联块意味着什么。查看Suckrfish下拉列表中的一个解决方案

有趣的是，我通过将display:inline添加到#navigation li a来实现它。我真的不知道它为什么起作用，但它起作用了。