0

作業中のWebサイトにCSSドロップダウンメニューを実装しています。IEを除くすべてのブラウザで問題なく動作します。

IEを使用すると、ドロップダウンがページのまったく異なる領域に表示されるため、ホバーが消える前にリンクをクリックすることはできません。.css以下のファイルと.html（ここではnav構造をbasicに変更）ファイルのコードを含めました。このナビゲーションは、PHPインクルードを介してサイトのレイアウトに配置されるため、ナビゲーションバーが表示される領域は中央に配置され、メインページの上部から230ピクセルになります。

strictモードを使用するDOCTYPEと、期待どおりに機能しますが、変更できない他の問題があるため、まったく使用しないでくださいDOCTYPE（そうでない場合は、サイト全体を再コーディングする必要があります）

これには何らかの回避策が必要だと確信しています...IEでまったく同じように表示されなくても、使用可能である必要があります。

どんな助けでも大歓迎です!! 私はこの頭痛を分類するために何週間も費やしました...

CSSファイル：

#catnav {
    padding: 0;
    clear: both;
    height: 32px;
    width: 980px;
    background: #000;
    position: absolute;
    top: 230px;
    z-index: 100;
}

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 100;
}

#nav ul {
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

#nav a {
    display: block;
    line-height: 32px;
    margin: 0 0px;
    padding: 0;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

#nav li a:hover {
    color: #fff;
    text-decoration: underline;
    display: block; 

}

#nav li ul {
    list-style: none;
    position: absolute;
    width: 0px;
    left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

#nav li li {
    float: left;
    margin: 0;
    padding: 0;
    width: 120px;
}

#nav li li a {
    width: 129px;
    height: 24px;
    line-height: 24px;
    color: #000;
    border-bottom: 1px solid #000;
    background: #c5c5c5;
    margin: 0;
    padding: 5px 20px 5px 15px;
}

#nav li li a:hover {
    border-top: 1px solid #131f27;
    background: #8f7c58;
    padding: 5px 20px 5px 15px;
}

#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
    position: static;
}

HTMLファイル：

<script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
        if (!document.getElementsByTagName) return false;
        var sfEls = document.getElementById("nav").getElementsByTagName("li");

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

<link rel="stylesheet" href="css.css">

<div id="catnav">
    <div id="nav">    
        <ul>  
            <li><a href="#" title="Title 1">Title Link 1</a></li>
        </ul>
            <li><a href="#" title="Title Link 2"></a>
        <ul>  
            <li><a href="#" title="Title">Title Link2 </a></li>  
        </ul>  
        </li>  
            <li><a href="#" title="Title 3">Title Link 3</a>
        <ul>  
            <li><a href="#" title="Sub Link 1">Sub Link 1</a></li>  
        </ul>  
            </li>  
            <li><a href="#" title="Title 4">Title 4</a>
        <ul>  
            <li><a href="#" title="Title">Sub Link 1</a></li>  
        </ul>           
        </li>  
            <li><a href="#" title="Title 5">Title Link 5</a></li>  
            <li><a href="#" title="Title 6 ">Title Link 6</a></li>  
            <li><a href="#" title="Title 7">Title Link 7</a></li>  
        </ul>  
    </div>
</div>

IEが少なくともこれらのドロップダウンをタイトルの230px下や右側ではなく、タイトルの下に表示するようにするにはどうすればよいですか？

4

1 に答える 1

0

ボックスモデルの問題のように聞こえますが、要素がページにレンダリングされる方法のIEの実装に関連する非常に多くのスレッドと質問があります。スニペットを簡単に試して、次のCSSセクションを変更しました。

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    _margin-top: -230px;
    _margin-left: -72px;
}

親リンクのすぐ下にサブリンクが表示されないという問題がまだあります。質問に答える時間はありませんが、これが出発点になるはずです。

これは2009年からの同様の問題であり、回答の間で良い議論があります。

于 2012-09-03T19:29:38.333 に答える