Hi,

I have a multi-level navigation menu done for IE6/IE7.
Here everything works fine but when there is 2nd row of menu, I'm not able to choose child menus of 1st row. That is 2nd row menus are overlapping with 1st row child menus which appears on hover of 1st row parent menus.

Please find the screenshot and source code for the same.
Is there anything i've to play around with css position, z-index. Please help me out!!!

Thanks in advance.
Thavapandi

screenshot:

working with 1row of menu.PNG

working with 1row of menu.PNG

problem with 2nd row menu.PNG

problem with 2nd row menu.PNG

source code:


HTML Code:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title> Menu </title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>
<style type="text/css">
* { margin:0;
    padding:0;
}
body { background:#ffffff; }   
</style>
<div id="menu">
    <ul class="menu" style="width:100%;">       
	   <li><a href="#" class="parent"><span>sample page 1</span><table><tr><td>
            <div id="menus" class="parent-menu"><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span><table><tr><td>
                    <div ><ul>
                        <li ><a href="#" class="parent" ><span>Sub Item 1.1</span><table><tr><td>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
							</td></tr></table></a>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span><table><tr><td>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
							</td></tr></table></a>
                        </li>
                    </ul></div>
					</td></tr></table></a>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
			</td></tr></table></a>
        </li>
        <li><a href="#" class="parent"><span>sample page 2</span><table><tr><td></td></tr></table></a></li>       
        <li><a href="#" class="parent"><span>sample page 3</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 4</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 5</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 6</span><table><tr><td>
			<div id="menus" class="parent-menu"><ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span><table><tr><td>
                    <div ><ul>
                        <li ><a href="#" class="parent" ><span>Sub Item 1.1</span><table><tr><td>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul></div>
							</td></tr></table></a>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span><table><tr><td>
                            <div><ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul></div>
							</td></tr></table></a>
                        </li>
                    </ul></div>
					</td></tr></table></a>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul></div>
			</td></tr></table></a>		
		</td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 7</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 8</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 9</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 10</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 11</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 12</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 13</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 14</span><table><tr><td></td></tr></table></a></li>       
		<li><a href="#" class="parent"><span>sample page 15</span><table><tr><td></td></tr></table></a></li>    
		
    </ul>
</div>
</body>
</html>
CSS:

Code:
 @font-face{
font-family:myfont;
src:url('RonniaBasicReg.otf');
}

body{
font-family:"myfont";
font-size:14px;
}

div#menu {
    height: 55px;
    width:auto;
	margin-bottom: 20px;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;

}
div#menu ul.menu {
    padding-right: 5px;
	  background:  skyblue; 
padding-left:5px;
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0 0 0 0;
    display: block;
    float: left;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}


div#menu li div{
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 40px;
    left: 0;
   	visibility:hidden;
    width: 195px;
    padding: 0 0 11px 7px;
    background: url(images/submenu-bottom.png) no-repeat 35% 100%;
    _background-image: url(images/submenu-bottom.gif);
    margin: -7px 0 0 -10px;
}

div#menu li :hover div {
	
	visibility:visible;
	}
	
	div#menu li :hover div div{
	visibility:hidden;
	}
	
	div#menu li :hover div li :hover div{
	visibility:visible;
	}
	
	div#menu li :hover div :hover div div{
	visibility:hidden;
	}
	
	div#menu li :hover div :hover div li :hover div{
	visibility:visible;
	}
	
	div#menu li :hover div :hover div :hover div div{
	visibility:hidden;
	}
	
	div#menu li :hover div :hover div :hover div li :hover div{
	visibility:visible;
	}
	
	div#menu a:hover {
	color:#fff;
	background-color:#949e6c;
	}
	#menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	}
	#menu li {
	float:left;
	width:150px;
	position:relative;
	}
	
	

div#menu a {
    position: relative;
    z-index: 10;
    height: 41px;
    display: block;
    float: left;
    line-height: 41px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right: 5px;
    text-align: center;
}
div#menu span {
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 0;
    line-height: 40px;
    height: auto;
    margin-right: 0px;
    _margin-right: 1px;
    background: none;
}
#menu span {
    margin-top: 2px;
	padding : 0 10px 0 15px;
    color:red;
    background: none;
    line-height: 30px;
}
div#menu li.current a,
div#menu ul.menu>li:hover>a
 {
		background:white;		
		text-align: center;
		-webkit-border-radius: 8px 8px 0 0;
		-moz-border-radius: 8px 8px 0 0;
		border-radius: 8px 8px 0 0;		
		color:#ed1924;		
}
div#menu li.current * a span,
div#menu ul.menu>li:hover * >a span {
    background: none;
    _background-image: none;
	color:#ed1924;
}

div#menu ul.menu>li:hover>a span {
    /*color: #ed1924;*/
	color:blue;
}

/*_____________sub menu__________*/
div#menus span {
    margin-top: 2px;
    padding-left: 30px;
    color: #F00;
    background: none;
    line-height: 40px;
}


/* menu::level2 */
div#menu ul ul li {
    background: none;
    padding: 0;
	
}
div#menu ul ul {
    padding-top: 10px;
}


*:first-child+html div#menu ul ul a {
    padding: 0;
    height: auto;
    float: none;
    display: block;
    line-height: 26px;
    font-size: 11px;
    color: #fff;
    z-index: -1;
    padding: 0 12px 0 12px;
    white-space: normal;
    width: 160px;
    margin: 0 5px;
    text-transform: none;
}
  
div#menu ul ul a span {
    padding: 0 15px;
    line-height: 26px;
    font-size: 11px;
}
div#menu li.current ul a,
div#menu li.current ul a span {
    background:none;
}
div#menu ul ul a:hover {
    background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
	color:#bf151e;
}
div#menu ul ul a:hover span {
	color:#bf151e;
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent {
    background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom;
}
div#menu ul ul a.parent span {
    background: url(images/submenu-pointer-top.png) no-repeat 0 0;
}
div#menu ul ul a.parent:hover {
    background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
}
div#menu ul ul a.parent:hover span {
    background: url(images/submenu-selected-top.png) no-repeat 0 0;
}
div#menu ul ul span {
    margin-top: 0;
    text-align: left;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
}

/* menu::level3 */
div#menu ul ul div {
    width: 180px;
    padding: 15px 0px 8px 0px;
    margin: -44px 0 0 174px !important;
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    _background-image: url(images/subsubmenu-top.gif);
}
* html div#menu ul ul div {
    width: 180px;
    padding: 15px 0px 8px 0px;
    margin: -44px 0 0 166px !important;
    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
    _background-image: url(images/subsubmenu-top.gif);
}
*+html div#menu ul ul div { height:10px }
*+html div#menu.ie7 ul ul div { height:auto }
div#menu ul ul ul {
    padding: 0 4px 5px 1px;
    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
    _background-image: url(images/submenu-bottom.gif);
}
div#menu ul ul div li {
    position:relative;
    top:-5px;
}