0

しばらくの間、問題に苦しんでいましたが、最終的に原因を突き止めることができました。

CSS3 できれいなドロップダウン メニューを作成しようとしています。いくつか試してみましたが、なぜか Internet Explorer で動作しませんでした。私はチュートリアルに従います。基本的に、インターネットからドロップダウンメニューをコピーして貼り付けましたが、結果はありません。

数分前 (この投稿から)、スクリプトにエラーは 1 つもありませんでした。ドロップダウン メニュー (navigation.html に配置) を単独で読み込んだところ、ドロップダウン メニューは (任意のブラウザーで) 機能しました。しかし、私のホームページ (index.php) にはありませんでした。ページ (navigation.html) を含めると問題が発生するようです (Internet Explorer のみ)。だから私の質問は：これを引き起こしているのは何ですか？ドロップダウン メニューを含める他の方法はありますか?

私のnavigation.htmlのコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="includes/navigation.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navigation">
<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Projects</span></a>
      <ul>
         <li><a href='#'><span>Windows Desktop</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</body>
</html>

「 header.php 」という名前のファイルにnavigation.htmlを含めています。Header.phpはindex.phpに含まれています

Index.php:

<?php
        include("includes/credits.html");
        include("includes/header.php");
        include("includes/border.php");
    ?>

Header.php:

<div class="header" id="one">
<?php
    include("includes/navigation.html");
?></div>

前もって感謝します

編集： 解決済みこのメタタグを追加して解決しました：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Internet Explorer を「定義」し忘れると問題が発生する可能性があるという記事を読みました。

お時間を無駄にして申し訳ありません！

4

1 に答える 1

0

古い IE では CSS3 に問題があると想像できるので、代わりに jquery を使用することをお勧めします。

HTML

<ul id="navigation">
    <li class="dropdown"><a href="#">Dropdown</a>
        <ul class="sub_navigation">
            <li><a href="#">Sub Navigation 1</a></li>
            <li><a href="#">Sub Navigation 2</a></li>
            <li><a href="#">Sub Navigation 3</a></li>
        </ul>
    </li>
    <li class="dropdown"><a href="#">Dropdown 2</a>
        <ul class="sub_navigation">
            <li><a href="#">Sub Navigation 1</a></li>
            <li><a href="#">Sub Navigation 2</a></li>
            <li><a href="#">Sub Navigation 3</a></li>
        </ul>
    </li>
</ul>

Jクエリ

$('.dropdown').hover(function() {
            $(this).find('.sub_navigation').stop(true, true).fadeToggle(600); 
    });

CSS

   ul {
        margin:0;
        padding:0;
        list-style-type:none;
        min-width:200px;
    }

    ul#navigation {
        float:left;
    }

    ul#navigation li {
        float:left;
        border:1px black solid;
        min-width:200px;
    }

    ul.sub_navigation {
        position:absolute;
        display:none;
    }

    ul.sub_navigation li {
        clear:both;
    }

    a,
    a:active,
    a:visited {
        display:block;
        padding:10px;
    }

http://jsfiddle.net/v5CsV/

于 2013-10-08T13:30:04.443 に答える