0

Web サイトで使用するために少し変更しようとしている CSS テンプレートがあります。私は奇妙な問題に直面していますが、それを修正する方法がわかりません。次のスナップショットに示すように、ユーザーがオプションの 1 つをクリックすると、そのオプションが濃い緑色の長方形の中に表示されるように設計された Web サイトの上部にあるメニュー バー:

ここに画像の説明を入力

この四角形は、次の 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を使用していて、メニューが 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 に答える