javascript - 我应该怎么做才能使这个菜单栏在 Internet Explorer 7 及更高版本中正常工作？

Question

我有一个 CSS 模板，我正在尝试稍微更改它以便在我的网站中使用它。我正面临一个奇怪的问题，我不知道如何解决它。网站顶部的菜单栏以这种方式设计，当用户单击其中一个选项时，该选项将位于深绿色的矩形内，如下面的快照所示:

此矩形使用以下 CSS 实现:

/* TOP MENU */
#nav{
    position:relative;
    z-index:200;
    padding:0;
    text-align:right
}
#topnav, #topnav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
}

#topnav{padding:25px 0 0 0; float:right}

#topnav a{
    padding:0 20px 34px 20px;
    color:#fff;
    text-decoration:none;
}

#topnav li a:hover{
    text-decoration: none;
  }
#topnav li.current > a{}

#topnav li{
    float:left;
    position:relative;
    font-size:12px;
    padding:0 0 0 0px;
    margin:0;
    height:35px;
    line-height:35px;
    cursor:pointer;
}
#topnav li.last{padding:0; margin:0}
#topnav li li{
    padding-right:0px;
    display:block;
    line-height:25px;
    padding:0px 0px 0px 0;
    margin-right:0;
    text-align:left !important;
    float:none;

}
#topnav ul {
    position:absolute;
    display:none;
    width:160px;
    top:58px;
    left:0;
    padding:15px 0 13px 0;
    text-align:left;
    background-position:0 13px !important
}

#topnav li ul a{
    width:130px;
    display:block;
    margin:0 0px;
    padding:8px 15px;
    font-size:12px !important;
    line-height:16px;
    color:#fff;
    text-align:left !important;
    text-transform:capitalize;

}

#topnav li ul a:hover{}

#topnav ul ul{
    top:0px;
}   

#topnav li ul ul {
    left:160px;
    margin:0px 0 0 0px;
}

#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul{
    display:none;
}
#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul{
    display:block;
}
#topnav li.back {}
#topnav li.back {z-index:8;position: absolute;}
#topnav > li a, #topnav > li a:hover, #topnav > li a:visited{z-index:10;position:relative}

此外，这个矩形随鼠标移动的移动取决于以下 Javascript 文件:

<script type="text/javascript" src="./Scripts/jquery.lavalamp.js"></script>

    <script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script>
    <script type="text/javascript" src="./Scripts/jquery.preloader.js"></script>

我的问题是我公司的大部分机器都使用 Internet Explorer 7 并且菜单无法正常使用。当我点击其中一个选项时，没有任何变化，这意味着我没有被重定向到另一个页面。除此之外，矩形仅保持在第一个选项周围。 <强>为什么？以及如何解决？

由于我是作为 ASP.NET 应用程序开发的，所以我将所有 CSS 和 Javascript 文件放在母版页中，对于菜单栏，我将其开发为用户控件。

这是指向 JSFiddle 的链接但由于缺少图像而未完成。抱歉，我不熟悉 JSFiddle。

Answer 1

替换

<script type="text/javascript" src="./Scripts/jquery.lavalamp.js"></script>

<script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>
<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="./Scripts/jquery.preloader.js"></script>

与:

<script>
if ($.browser.version < 9.0 && $.browser.msie) {
document.getElementsByTagName("head")[0].innerHTML = '<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script><script type="text/javascript" src="./Scripts/jquery.preloader.js"></script><script type="text/javascript"  src="./Scripts/jquery.lavalamp.js"></script><script type="text/javascript" src="./Scripts/lavalamp-config.js"></script>';
}
else {
    document.getElementById("head")[0].innerHTML = '<script type="text/javascript" src="./Scripts/jquery.easing.1.1.js"></script><script type="text/javascript" src="./Scripts/jquery.preloader.js">';
}

​​</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​