Child menus overlapping with second row parent menu

HTML & CSS
1

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

problem with 2nd row menu.PNG

source 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:

 @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;
}
2

Hi,

I suggest you abandon that old menu and use one that is valid and avoids the need for the invalid nested anchors and tables. It looks like a version of Stu Nichols old IE6 dropmenu which even stu suggests not using these days.

You would be better off with the suckerfish version and a small script for IE6 if you still need to support IE6 (why?). That will keep the code and css much simpler and enable you to fix the overlap problem in IE6.

It is awkward with your current menu to fix it for IE6 because you need to raise the z-index of the list element on hover so that it will overlap anything underneath.

You can try this code which should be added to the end of the CSS file.


div#menu li:hover {z-index:99}
* html div#menu li{position:static!important}
* html div#menu a:hover {z-index:99}
3

Thanks so much for your reply, it worked perfectly in IE7! Thanks a lot!!!