1

我一直在使用 jquery 下拉菜单，它似乎在 IE7 及更高版本以及所有其他目标浏览器中都可以正常工作。这很奇怪，因为子菜单必须根据子菜单项的数量在一个块中向上移动一定量。我一直试图让菜单在 IE6 中正确显示，但一直无法做到（菜单项没有按应有的方式垂直对齐，并且子菜单的行为不像在更现代的浏览器中那样）。任何帮助将不胜感激。

菜单在线查看这里

这是代码：

HTML：

索引.htm:

<!DOCTYPE html> 
    <html>
      <head> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection"/>
    <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
    <![endif]-->

    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>
<body>
<div id="header">
    <div id="topbar">
        <div id="logo">LOGO<br>GOES<br>HERE</div>
            <ul class="dropdown">
                <li class="home"><a href="index.htm" class="homepagelink">Home</a></li>
                <li class="aboutomni"><a href="#" id="off1">About Us</a>
                    <ul class="sub_menu">
                        <li><a href="#">Our Story</a></li>
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Our Clients</a></li>
                    </ul>
                </li>
                <li class="productsservices"><a href="#">Products &<br>Services</a>
                    <ul class="sub_menu">
                         <li><a href="#">Business</a></li>
                         <li><a href="#">Personal</a></li>
                    </ul>
                </li>
                <li class="applications"><a href="#">Applications</a></li>
                <li class="omnipro"><a href="#">Talk to a<br>Pro</a></li>
            </ul>
        </div>
    </div>
<div id="content">
Content goes here.  
</div>

</body>
</html>

CSS：

样式.css：

/* 
    SITEWIDE STYLES
*/

html, body {
    margin: 0;
    padding: 0;
    background-color:black;
}

#header {
    width:100%;
    height: 174px;
    z-index:999;
    background-color:blue;
    background-position: center;
    text-align: center;
}

#topbar {
    width:1088px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    height: 174px;
    background-color:green;


}

#logo {
    float:left;
    background-color: #000000;
    width:279px;
    color:white;
    text-align:center;
    }



#main {width:1129px;text-align:center;margin-left:auto;margin-right:auto}


*                                   { margin: 0; padding: 0; }
body                                { font: 20px Helvetica, Sans-Serif;line-height:1.5em; } 
#page-wrap                          { width: 800px; margin: 25px auto; } 
a                                   { text-decoration: none; }
ul                                  { list-style: none; }
p                                   { margin: 15px 0; }
a.homepagelink                      { color:white !important;}

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative;float:left;margin-top:83px;margin-left:43px;width:750px }
ul.dropdown li                      { font-weight: normal; float: left; zoom: 1; }
ul.dropdown a:hover                 { color: #fff;}
ul.dropdown a:active                { color: #fff;}
ul.dropdown li a                    { display: block; width:150px;color: #d3d3d3; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { color: #fff; position: relative;}


/* 
    ABOUT OMNI
*/

.dropdown > li.aboutomni:hover      {top:-30px; padding-bottom:30px;background: #0181ae;color: #FFFFFF;width:150px}
.dropdown > li.aboutomni a:hover    {color: #d3d3d3;}

/* 
    PRODUCTS AND SERVICES
*/

.dropdown > li.productsservices         {margin-top:-15px;width:150px}
.dropdown > li.productsservices:hover   {top:-60px; padding-bottom:30px;background: #0181ae;color: #FFFFFF;width:150px;margin-top:0px;}
.dropdown > li.productsservices a:hover     {color: #d3d3d3;}


/* 
    OMNIPRO
*/

.dropdown > li.omnipro {margin-top:-19px;padding-top:4px;height:62px;background-color:red}




/* 
    LEVEL TWO
*/
ul.dropdown ul                      { width: 150px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                   { font-weight: normal; background: #0181ae;float: none; }
ul.dropdown ul li a                 { color: #d3d3d3; } 
ul.dropdown ul li:hover             { color: #ffffff; } 
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; } 
ul.dropdown ul li a:hover           { color:white !important; }

即.css：

ul.dropdown ul li                   { display: inline; width: 100%; }

JAVASCRIPT：

js/jquery.dropdownPlain.js

$(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});
4

0 回答 0