I hope anyone can help me. Thanks to help on this forum I have a good working menu with submenu and subsubmenu. It works fine in Firefox and Google Chrome, but is a complete disaster in that awful Internet Explorer. I wish more website users would be aware of the problem IE causes and would ban that browser. But alas, I have to live with it and find a solution. Apart from positioning problems, my complete submenu and subsubmenu doesn't show up. I hope anyone knows a solution.
This is a relevant part of the HTML code:
<div id= "siteNavigation">
<ul> <!-- begin menu -->
<li><a href="#"><img src="images/button_activiteiten.png" alt="activiteiten"></a> <!-- hoofdmenu button 3 -->
<ul> <!-- submenu button 3 -->
<li><a href="#"><img src="images/button_informatie.png" alt="informatie"></a><!-- submenu button 3.1 -->
<ul> <!-- subsubmenu button 3.1 -->
<li><a href="openingstijd.html"><img src="images/button_opening.png" alt="openingstijd"></a></li> <!-- subsubmenu button 3.1.1 -->
</ul> <!-- einde subsubmenu button 3.1 -->
</li> <!-- einde submenu button 3.1 -->
<li><a href="kinderen.html"><img src="images/button_kinderen.png" alt="kinderen"></a></li> <!-- submenu button 3.2 -->
</ul> <!-- einde submenu button 3 -->
</li> <!-- einde hoofdmenu button 3 -->
</ul><!-- einde menu -->
</div> <!-- //siteNavigation -->
and here is the CSS for the navigation:
#siteNavigation ul {
width:150px; /* of image */
list-style-type:none; /* verwijdert opsommingstekens */
outline:none;
border:none;
margin:0;
padding:0;
}
#siteNavigation ul a img {
border:none;
}
#siteNavigation ul li {
position:relative; /* so the second level takes position from it */
margin:0;
padding:0;
}
#siteNavigation ul li a {
display:block;
height:29px;
}
/* 2nd level */
#siteNavigation ul li:hover ul { /* reveals second level when hovering on the first */
visibility:visible;
}
#siteNavigation ul ul {
visibility:hidden; /* to initially hide the drop down menu */
position:absolute;
top:0px;
left:150px; /*positie submenu t.o.v. hoofdmenu */
width:150px; /* breedte afbeelding */
margin:0;
padding:0;
}
#siteNavigation ul ul a img { /* image dimensions */
display:block;
width:150px;
height:29px;
border:none;
}
#siteNavigation ul ul li {
height:29px; /* height of second level list element matched to image height */
position:relative; /* IH_added for 3rd level */
}
#siteNavigation ul ul li a {
display:block;
height:29px;
}
/* 3rd level */
#siteNavigation ul li:hover ul li ul { /* to initially hide the drop down menu_IH */
visibility:hidden;
position:absolute;
top:0px;
left:150px; /* position subsubmenu */
width:150px; /* width image */
}
#siteNavigation ul ul ul a img { /* image dimensions */
display:block;
width:150px;
height:29px;
border:none;
}
#siteNavigation ul li ul li:hover ul {
visibility:visible; /* reveals 3rd level when hovered */
}
#siteNavigation ul ul ul li {
height:29px; /* height of third level list element matched to image height */
}
How someone knows how to deal with this.
