1

希望你们中的一个可以帮助我。

我有一个带有两个下拉菜单的基本列表菜单。这在除 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>​

和CSS

a {text-decoration:none;}

#topNav {
float:right;
height:30px;
margin:0;
font-size:12px;
}

#topNav li {
display:inline;
float:left;
list-style:none;
color:#666;
border-left: 1px solid #666;
padding: 0 3px 0 3px;
position:relative;
}

#topNav ul a {
white-space:nowrap;
}

#topNav li a:hover {
border-bottom:2px solid #369;
}

#topNavSecond a:hover {
border-bottom:2px solid transparent !important;
}

#topNavFirst {
border-left: 1px solid transparent !important;
}

/*****OUR-PEOPLE DROPDOWN*****/

#topNav ul{
background:#fff;
border:1px solid #666;
border-top:0px solid transparent;
border-bottom:2px solid #666;
list-style:none;
position:absolute;
left:-9999px;
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 ul li{
display:block;
border-left:0px;
margin-bottom: 0px;
padding:0;
vertical-align: bottom;
}

#topNav ul a{
padding:0 0 0 5px;    
}

#topNav li:hover ul{ 
left:auto;
}

#topNav li:hover a {
color:#369;
}

#topNav li:hover ul a{
text-decoration:none;
color:#666;
}

#topNav li:hover ul li a:hover{
color:#fff;;
width:100%;
border-bottom:0px solid transparent !important;
}

#topNav ul li:hover {
background:#369;
display: block;
}

#topNav ul li a {
display: block;
padding:0 0 0 4px;
}

/************/

/*****OUR-SERVICES DROPDOWN*****/

#topNavThird a:hover {
border-bottom:2px solid transparent !important;
}

#topNavThird ul{ 
/*background:#fff url(images/service-ul-bg.png) no-repeat;*/
width:135px !important;
/*margin-left:120px !important;*/
}​

脚本

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');
        });
    });

在这里它工作得很好

http://jsfiddle.net/BcWd9/6/

这是它在 IE7 中的外观的屏幕截图。

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

如您所见，ul 出现在 li 的右侧而不是左侧，它覆盖了顶部列表。我试过删除空白，但没有运气。有任何想法吗？如果你们中的一个可以提供帮助，将不胜感激。

4

2 回答 2

0

我有同样的问题。它为我解决的方法是为悬停时显示的 li 元素添加显式宽度

#nav li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    *zoom:1; /*IE7*/
    *width:12em; /*IE7*/
}
于 2013-06-25T06:28:55.780 回答
0

试试这个——不要使用left值来隐藏子菜单，display: none;而是尝试使用。然后使用left和top在翻转时定位它们。这似乎在 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;
}

这是 jsFiddle 的更新版本：http: //jsfiddle.net/BcWd9/5/

于 2012-06-15T15:47:18.503 回答