CSS3 dropdown menu doesn't work in IE when included

Question

I'm struggling with an issue for a while now, and I finally managed to figure out what caused it.

I've been trying to create a pretty dropdown menu in CSS3. I've tried several things, but for some reason I never got it working in Internet Explorer. I follow tutorials, I basically copy and pasted dropdown menu's from the internet, without any results.

A few minutes ago (from this post) I didn't see a single error in my script. I loaded my dropdown menu (placed in navigation.html) on it's own and the dropdown menu worked (in any browser). However, it didn't on my home page (index.php). It seems like including the page (navigation.html) causes the problem (just for Internet Explorer). So my question is: What is causing this? And is there any other way to include my Dropdown menu?

Here is the code of my 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>

I am including the navigation.html in the file named " header.php ". Header.php is being included in 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>

Thanks in advance

Edit: SOLVED I solved it by adding this meta tag:

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

I just read at an article that this could cause problems for Internet Explorer, if you forgot to 'define' it.

Sorry for wasting your time!

Answer 1

I could imagine older IEs having issues with CSS3, so could i'd recommend using jquery instead.

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 dropdown menu doesn't work in IE when included

Question

1 answers

solution1
0 2013-10-08 13:30:04

CSS3 dropdown menu doesn't work in IE when included

Question

1 answers

solution1 0 2013-10-08 13:30:04

solution1
0 2013-10-08 13:30:04