Menu 下拉菜单上的IE7 li ul错误

希望你们中的一个能帮我

我有一个带有两个下拉菜单的基本列表菜单。除了IE6和IE7之外，这一切都可以在所有浏览器上正常工作。请看一下我的标记

<nav>
                <ul id="topNav"
                    ><li id="topNavFirst"><a href="../about/about.php" id="aboutNav">About Us</a></li
                    ><li id="topNavSecond"><a href="../people/our-people.php" id="peopleNav">Our People</a
                        ><ul id="subList1"><li><a href="../people/mike-hadfield.php">Mike Hadfield</a></li
                            ><li><a href="../people/karen-sampson.php">Karen Sampson</a></li
                            ><li><a href="../people/milhana-farook.php">Milhana Farook</a></li
                            ><li><a href="../people/kim-crook.php">Kim Crook</a></li
                            ><li><a href="../people/amanda-lynch.php">Amanda Lynch</a></li
                            ><li><a href="../people/gideon-scott.php">Gideon Scott</a></li
                            ><li><a href="../people/paul-fuller.php">Paul Fuller</a></li
                            ><li><a href="../people/peter-chaplain.php">Peter Chaplain</a></li
                            ><li><a href="../people/laura-hutley.php">Laura Hutley</a></li
                        ></ul
                    ></li
                    ><li id="topNavThird"><a href="../services/our-services.php" id="servicesNav">Our Services</a
                        ><ul id="subList2"><li><a href="../services/company-and-commercial.php">Company &amp; Commercial</a></li
                            ><li><a href="../services/employment.php">Employment</a></li
                            ><li><a href="../services/civil-litigation.php">Civil Litigation</a></li
                            ><li><a href="../services/debt-recovery.php">Debt Recovery</a></li
                            ><li><a href="../services/conveyancing.php">Conveyancing</a></li
                            ><li><a href="../services/commercial-property.php">Commerical Property</a></li
                            ><li><a href="../services/wills-and-probate.php">Wills &amp; Probate</a></li
                            ><li><a href="../services/family.php">Matrimonial &amp; Family</a></li
                    ></ul
                    ></li
                    ><li><a href="../news/news.php" id="newsNav">News</a></li
                    ><li><a href="../careers/careers.php" id="careersNav">Careers</a></li
                    ><li><a href="../contact/contact.php" id="contactNav">Contact</a></li
                ></ul><!-- /topNav -->
            </nav>​ 

剧本

jQuery(document).ready(function () {

            $('#subList1').css("display", "none");
        $('#topNavSecond').hover(function () {
            $('#subList1').stop(true, true).fadeIn('400');
        },
        function(){
            $('#subList1').stop(true, true).fadeOut('400');
        });
         $('#subList2').css("display", "none");
        $('#topNavThird').hover(function () {
            $('#subList2').stop(true, true).fadeIn('400');
        },
        function(){
            $('#subList2').stop(true, true).fadeOut('400');
        });
    });  

在这里，它工作得很好

下面是IE7中的屏幕截图

hadfield.andymcnallydesign.co.uk/images/ie7-error.jpg

---

正如你所看到的，ul出现在li的右边，而不是左边，它覆盖了最上面的列表。我尝试过删除空白，但没有成功。有什么想法吗？如果你们中有人能帮忙，我将不胜感激

尝试使用

左

值隐藏子菜单，而不是使用

显示：无取而代之。然后在翻滚时使用
左侧
和
顶部
定位它们。这似乎对我在windows和Chrome/Firefox的IE7中起作用，尽管我还没能在IE6中测试它

#topNav ul{
    background:#fff;
    border:1px solid #666;
    border-top:0px solid transparent;
    border-bottom:2px solid #666;
    list-style:none;
    display: none;
    width:100px;
    text-align:left;
    padding:5px 0 5px 0px;
    margin:0 0 0 -4px;
    z-index:10;
    -webkit-box-shadow: 1px 1px 1px #666;
    -moz-box-shadow: 1px 1px 1px #666;
    box-shadow: 1px 1px 1px #666;
    vertical-align: bottom;
}

.
.
.

#topNav li:hover ul{ 
    display: block;
    position: absolute;
    left: 3px;
    top: 14px;
}

这里有一个关于JSFIDLE的更新版本：
我也有同样的问题。对我来说，它的工作方式是为显示在hover上的li元素添加一个显式宽度

#nav li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    *zoom:1; /*IE7*/
    *width:12em; /*IE7*/
}

感谢Shawn的支持，尽管在IE7中仍然让我感到悲伤。。。一旦我搞定了，我会发布一个补丁。我还使用jQuery脚本淡入ul。我会把它包括在手术中，也许这是导致问题的原因。
#nav li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    *zoom:1; /*IE7*/
    *width:12em; /*IE7*/
}