包含CSS3下拉菜单在IE中不起作用

Question

我已经为这个问题苦苦挣扎了一段时间，我终于设法弄清楚是什么原因造成的。

我一直在尝试在CSS3中创建一个漂亮的下拉菜单。 我已经尝试了几种方法，但是由于某种原因，我从未在Internet Explorer中使用它。 我遵循教程，基本上从互联网复制并粘贴了下拉菜单，没有任何结果。

几分钟前（来自本文），我的脚本中没有看到任何错误。 我自己加载了下拉菜单（放置在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出现问题。

抱歉浪费您的时间！

Answer 1

我可以想象较旧的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>

JQUERY

$('.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/

包含CSS3下拉菜单在IE中不起作用

问题描述

1 个解决方案

解决方案1
0 2013-10-08 13:30:04

包含CSS3下拉菜单在IE中不起作用

问题描述

1 个解决方案

解决方案1 0 2013-10-08 13:30:04

解决方案1
0 2013-10-08 13:30:04