Log in

View Full Version : jQuery Multi Level CSS Menu #2 - no submenus


Gran Calabaza
06-07-2012, 07:50 PM
Hello,

1) Script Title: jQuery Multi Level CSS Menu #2

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

3) Describe problem: I cannot see the submenus in IE 8 using the following code:

HTML (ASP) code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>principal dt mgee</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../css/estilos.css">
<link rel="stylesheet" type="text/css" href="../../css/jqueryslidemenu.css">
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="../../css/jquery-1.5.min.js"></script>
<script type="text/javascript" src="../../css/jqueryslidemenu.js"></script>
</head>

<body bottommargin="0px" topmargin="0px" leftmargin="0px" rightmargin="0px">
<!----------- fondo ---------->
<div id="imagenFondo" style="position:absolute; width:850px; height:600px; z-index:1; left:0; top:0px">
<img src="../../imagenes/fondo_.jpg" width="850px" height="600px">
</div>
<!----------- banner ---------->
<div id="banner" style="position:absolute; width:577px; height:94px; z-index:2; left:85px; top:7px;">
<img src="../imagenes/banner_mgee.jpg" width="577px" height="94px">
</div>
<!----------- menú ---------->
<div id="myslidemenu" style="position:relative; z-index:10000!important; left:80px; top:105px;" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
</body>
</html>


I changed the CSS code according to one of the answers I found in the DD forums:


.jqueryslidemenu, .jqueryslidemenu *
{
position: relative;
z-index: 10000!important;
}

...


I've already read many of the answers that other posters have received. I tried to implement them but so far they're not working.

Many thanks in advance.
Gran Calabaza
06-08-2012, 07:30 PM
Hello,

I think I've just figured it out.

It was the very first line of the page. First, I must say that I want my pages to be ASP rather than HTML because I want to include files.

I'm using Dreamweaver. Each time I create a new ASP file, it declares the first line like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


I changed that for the header that is declared when I create a new HTML file:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


It works fine with this. But I don't know if there'll be any problem because they're ASP pages, not HTML pages (file.asp; not file.htm). Maybe this is not the right forum to ask but, could you please tell me if something is going to crash?

Thank you for your time and sorry for my english, it ain't my native language.