Multi-level Drop-down Menu CSS JS: not working with IE

Question

Problem with IE11, I have the drop-down multi-level (drop down) menu working in Chrome and FireFox but not IE11, such that I can change the menu just one file, and do not have to go to every single page to change the menu. I will need three level menu. (thanks Frogmouth for the help to make it working): multi-level (drop down) menu css js

I have tried HTML different !DOCTYPE but not working.

how can I solve this IE menu problem?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>PHP Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<link href="site123.css" rel="stylesheet">
</head>
<body>

<nav id="nav01"></nav>

<script type="text/javascript" language="javascript" src="Menu-Script.js"></script>


<div id="main">


<h1>Welcome to Our Site</h1>
<h2>Web Site Main Ingredients:</h2>

<p>Pages (HTML)</p>
<p>Style (CSS)</p>
<p>Code (JavaScript)</p>


<footer id="foot01"></footer>
</div>

</body>
</html>

I have CSS (file name: site123.css)

ul#third-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}

ul#third-level-menu > li
{
height: 30px;
background: #999999;
}

ul#third-level-menu > li:hover { background: #CCCCCC; }

ul#second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}

ul#second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
ul#second-level-menu > li:hover { background: #CCCCCC; }

ul#top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}

ul#top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
ul#top-level-menu > li:hover { background: #CCCCCC; }

ul#top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}


/* Menu Link Styles */

ul#top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;

/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}

ul#top-level-menu a:hover { color: #000000; }

and I have JS (file name: Menu-Script.js)

document.getElementById("nav01").innerHTML =
"<ul id='top-level-menu'>" +
"<li><a href='index.html'>Home</a>" + // not close li here

"<ul id='second-level-menu'>" +
"<li><a href='index12.html'>Home12</a>" + // not close li here


 "<ul id='third-level-menu'>" +
 "<li><a href='index123.html'>Home123</a></li>" +
 "<li><a href='index124.html'>Home124</a></li>" +
 "</ul></li>" + // close li here

 "<li><a href='index13.html'>Home13</a></li>" +

"</ul></li>"  + // close li here

"<li><a href='customers.html'>Data</a></li>" +
"<li><a href='about.html'>About</a></li>" +
"</ul>"; 


document.getElementById("foot01").innerHTML =
"<p>&copy;  " + new Date().getFullYear() +
" OKay..</p>";

score 0 · Answer 1 · answered Apr 20 '15 at 14:10

So many things wrong with this, your using html5 tags in a none html5 doc.

The problem however is due to you loading the js before the footer tag so it's not seen by the js.

The menu does not have to be done in js use plain html.

 <!DOCTYPE html>
 <html>
 <head>
 <link href="site123.css" rel="stylesheet">
 </head>
 <body>

 <nav id="nav01">
     <ul id="top-level-menu">
         <li><a href="index.html">Home</a>
             <ul id="second-level-menu">
                 <li><a href="index12.html">Home12</a>
                     <ul id="third-level-menu">
                         <li><a href="index123.html">Home123</a></li>
                         <li><a href="index124.html">Home124</a></li>
                     </ul>
                 </li>
                 <li><a href="index13.html">Home13</a></li>
             </ul>
         </li>
         <li><a href="customers.html">Data</a></li>
         <li><a href="about.html">About</a></li>
     </ul>
 </nav>


 <div id="main">


 <h1>Welcome to Our Site</h1>
 <h2>Web Site Main Ingredients:</h2>

 <p>Pages (HTML)</p>
 <p>Style (CSS)</p>
 <p>Code (JavaScript)</p>


 <footer id="foot01"></footer>
 </div>
 <script>
     document.getElementById("foot01").innerHTML =
 "<p>&copy;  " + new Date().getFullYear() +
 " OKay..</p>";
 </script>
 </body>
 </html>

This is a good idea, but having more than 40html pages would be a problem when adding/changing a new submenu every quarter. It got to be a code that can do this. thanks. — Hillary Rosy, Apr 21 '15 at 03:51
Use a html template if it needs to change and use js to load it into the doc. — Dave Jones, Apr 21 '15 at 15:17

Multi-level Drop-down Menu CSS JS: not working with IE

how can I solve this IE menu problem?

1 Answers1