0

我有一个 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。

4

1 回答 1

0

代替

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

​​&lt;/script>​​​​​​​​​​​​​​​​​​​​​​​​​​​
于 2012-08-13T22:50:13.210 回答