0

私はCSSメニューの専門家ではありません。しかし、CSSメニューを作るための基本的なシステムは知っています。以前このシステムを使用して動作しましたが、今回は動作しません。

サイトはhttp://www.uniethos.comです。このサイトをチェックしてください

このメニューは、他のすべての最新ブラウザで動作します。しかしIE 6と7ではそうではありません。IE6はアンカー以外のホバーをサポートしていません。それで、Whatever Hoverを使用する前に。しかし、今回は動作せず、IE7 でも動作しません。なぜそれが起こっているのかわかりません。私のcssに問題がある可能性があります。cssを確認してください。

IE 6 または 7 がインストールされていない場合は、 http://spoon.net/browsers/から実行できます。1 つのプラグインをインストールする必要があります。

メニューに使用しているCSSは

.glossymenu{
    background: #B4B3B3;
    height: 30px;
    width: 100%;
    padding: 0;
    margin: 0;
    display:inline-block;
    position:relative;

}

.glossymenu ul
{
   list-style: none;
   padding: 0px;
   margin: 0; 
   padding-left: 0px;
}

.glossymenu li ul
{
    display:none;
    position:absolute;
    width: 80%;
    top:30px;
    left:0px;
    background-color:#5B0C10;
    border:0px;
    z-index: 99;
}

.glossymenu li li a
{
    padding: 0px 10px 0px 10px; 
}    

.glossymenu li li a:hover
{
    background : #871016; 

}

.glossymenu li{
    float:left;
    padding: 0;
}

.glossymenu li a{
    float: left;
    display:block;
    position:relative;
    color:#FFF;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;    
}

.glossymenu li a b{
    float: left;
    display: block;
    padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
    color: #FFF;
    background: #5B0C10;
    background-position: left;
    text-decoration: none;
}

.glossymenu li a:visited{
    text-decoration: none;
}

.glossymenu ul li:hover ul 
{
    display: block;
}
4

2 に答える 2

0

さて、私は問題を見つけませんでした。しかし、私はカスタムJavascriptコードでメニューを修正しました。

sfHover = function() {
    var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

同じ問題に直面している人々は、これが役立つかもしれません。ありがとう。

于 2010-04-12T15:52:56.680 に答える
0

もちろん、ホバーが最適です。しかし、なぜそれが機能しなかったのかわかりません。同じ問題に直面した場合は、この JavaScript を使用できます。ただし、コードを理解する必要があります。

sfHover = function() { 
// You may have to change the "glossymenu" id with your one
    var sfEls = document.getElementById("glossymenu").getElementsByTagName("LI"); 


    for (var i=0; i<sfEls.length; i++) { 
        sfEls[i].onmouseover=function() { 
            this.className+=" over"; 
        } 
        sfEls[i].onmouseout=function() { 
            this.className=this.className.replace(new RegExp(" over\\b"), ""); 
        } 
    }  }  if (window.attachEvent) window.attachEvent("onload", sfHover);

私の場合、「glossymenu」という名前の div ID があります。これをIDで変更する必要があります。また、「over」という名前の別の CSS クラスを宣言する必要があります。私の場合 -

.glossymenu li:hover ul, .glossymenu li.over ul
{
    display: block;
}

1 レベルのドロップダウン メニューにはこれで十分です。何も必要ありません。問題がなければホバーしてください。

于 2010-05-13T10:30:43.893 に答える