-3

サイトを IE9 と初期のバージョンで正常に動作させるのに問題があります (IE10 と FireFox でも正常に動作します)。問題は、ホームページ (またはナビゲーション バーがリンクしているページのいずれか) にアクセスすると、各ナビゲーション バーのリンクが横に並んで表示されるのではなく、他のページの上に表示されることです。奇妙な点は、ホームページで検索ボタンをクリックすると、すべてが正常に機能し始めることです。

サイトを検索し、ファイル内のメタ タグの内容を変更するなどの推奨される提案を試みましたが、役に立ちませんでした。

編集: 誰かがスクリーンショットを含めることを提案しましたが、まだ十分な評判ポイントがないため、そうすることができません.

ナビゲーション バーに含める HTML ファイル: 

//<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE10'/>
<link rel="stylesheet" href='jsddm.css'>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
$(function(){

  $("ul.jsddm li").hover(function(){
    $('ul:first',this).css('visibility', 'visible');

     }, function(){
    $('ul:first',this).css('visibility', 'hidden');

     });

   });
</script>



<ul class="jsddm">
<li><a href="home"><img src="./styles/icons/sitelogolowres.png"> APPraisal</a>
<li><a href="#">OS</a>
    <ul>
        <li><a href="#">Android</a></li>
        <li><a href="#">iOS</a></li>
    </ul>
</li>
<li><a href="#">Rating</a>
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</li>
<li><a href="login">Login</a></li>
<li><a href="register">Register</a></li>
</ul>

</div>
<br/><br/>

CSS ファイル:

ul.jsddm
{
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 2.0em;

}

ul.jsddm a
    {
    color: #FFF;
    background-color: #333;
    border: 1px solid #444;
    display: block;
    text-decoration: none;
    text-align: center;
    width: auto;
}

ul.jsddm a:hover
{
    color: #000;
    background-color: #FFF;
}

ul.jsddm > li
{
    position: relative;
    float: left;
    list-style: none;
    width: 20%;
}

ul.jsddm li ul li
{
    list-style:none;
}

ul.jsddm ul
{
    position: absolute;
    width: 100%;
    top: 33px;
    padding: 0;
    visibility: hidden;
}
4

1 に答える 1

0

これを試して

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
    ul.jsddm, ul.flyout
    {
        margin: 0;
        padding: 0;
        line-height: 2.0em;
        list-style-type:none;
    }
    ul.jsddm li
    {
        float: left;
        width: 19%;
        position:relative;
    }
    ul.jsddm a
    {
        color: #FFF;
        background-color: #333;
        border: 1px solid #444;
        display: block;
        text-decoration: none;
        text-align: center;
        width: auto;
    }
    ul.flyout li
    {
        width: 100%;
        display:block;
        float:none;
    }
    ul.jsddm a:hover
    {
        color: #000;
        background-color: #FFF;
    }
    ul.flyout
    {
        display:none;
        position:absolute;
        top:34px;
        left:0px;
        width:100%;
    }
    ul.jsddm li:hover ul.flyout
    {
        display:block;
    }
</style>
</head>
<body>

<div>
    <ul class="jsddm">
        <li><a href="home">APPraisal</a>
        <li><a href="#">OS</a>
            <ul class="flyout">
                <li><a href="#">Android</a></li>
                <li><a href="#">iOS</a></li>
            </ul>
        </li>
        <li><a href="#">Rating</a>
            <ul class="flyout">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </li>
        <li><a href="login">Login</a></li>
        <li><a href="register">Register</a></li>
    </ul>
</div>
</body>
</html>

ドロップダウンをCSSに変更しました。主な問題は ul.jsddm > li でした。最初の li のみをスタイルし、デフォルトの li スタイルなしで問題があります。

于 2013-04-30T21:29:22.230 に答える