Question

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

enter image description here

使用以下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>

如何使此菜单栏在Internet Explorer 7及更高版本中正常运行？

1 个答案: