I am working on a menu for a website with submenus and subsubmenus. Thanks to SuzyUK I have a menu now with a well working submenu. My next step is to add a subsubmenu to one or two of the buttons. It didn't cover the content of the thread I responded to with my initial question, so I opened this thread with the appropriate subject mentioned.
The problem I have with the subsubmenu (the 3rd level) is that however it is invisible when the page is loaded, it shows up at the moment the corresponding submenu (2nd level to which it belongs) is hovered. I undoubtedly have done something wrong with the CSS code, but I don't see it. I used the CSS code that works well for the menu and submenu to start from and added items for the 3rd level, to the best of my knowledge. Background colors were only added for test purposes. I hope someone can help me with this.
This is the relevant part of the html code:
<div id= "siteNavigation">
<ul> <!-- start menu -->
<li><a href="openingstijd.html" class="active"><img src="images/buttons_navigatie_openingstijd.jpg" alt="openingstijd"></a></li> <!-- mainmenu button 1 -->
<li><a href="collectie.html"><img src="images/buttons_navigatie_collectie.jpg" alt="collectie"></a> <!-- mainmenu button 2 -->
<ul> <!-- submenu button 2 -->
<li><a href="activiteiten.html"><img src="images/buttons_navigatie_activiteiten.jpg" alt="activiteiten"></a></li> <!-- submenu button 2.1 -->
<li><a href="home.html"><img src="images/buttons_navigatie_home.jpg" alt="home"></a></li> <!-- submenu button 2.2 -->
</ul> <!-- end submenu button 2 -->
</li> <!-- end mainmenu button 2 -->
<li><a href="prijzen.html"><img src="images/buttons_navigatie_prijzen.jpg" alt="James"></a> <!-- mainmenu button 3 -->
<ul> <!-- submenu button 3 -->
<li><a href="contact.html"><img src="images/buttons_navigatie_links.jpg" alt="Phil"></a></li> <!-- submenu button 3.1 -->
<li><a href="collectie.html"><img src="images/buttons_navigatie_agenda.jpg" alt="Phil"></a> <!-- submenu button 3.2 -->
<ul> <!-- subsubmenu button 3.2 -->
<li><a href="contact.html"><img src="images/buttons_navigatie_informatie.jpg" alt="Phil"></a></li> <!-- subsubmenu button 3.2.1 -->
<li><a href="collectie.html"><img src="images/buttons_navigatie_route.jpg" alt="Phil"></a></li> <!-- submenu button 3.2.2 -->
</ul> <!-- end subsubmenu button 3.2 -->
</li> <!-- end submenu button 3.2 -->
<li><a href="vrijwilligers.hmtl"><img src="images/buttons_navigatie_vrijwilligers.jpg" alt="Carly"></a></li> <!-- submenu button 3.3 -->
</ul> <!-- end submenu button 3 -->
</li> <!-- end mainmenu button 3 -->
</ul><!-- end menu -->
</div> <!-- //siteNavigation -->
and this is the css:
/* ul */
#siteNavigation ul {
width: 150px; /* width image */
list-style-type: none; /* removes bullets */
outline: none;
border: none;
background: #eee; /* grey */
}
#siteNavigation ul a img {
border: none;
}
/* ul li */
#siteNavigation ul li {
position: relative; /* so the second level takes position from it */
}
#siteNavigation ul li:hover ul { /* reveals second level when hovering on the first */
visibility:visible;
}
#siteNavigation ul li a {
display: block;
height: 22px;
}
/* ul ul */
#siteNavigation ul ul {
visibility:hidden; /* to initially hide the drop down menu */
position:absolute;
top:0;
left: 111px; /* position submenu*/
width: 150px; /* width image */
z-index: 1;
background: #fee; /* pink */
}
#siteNavigation ul ul a img { /* image dimensions */
display: block;
width: 150px;
height: 22px;
border: none;
}
/* ul ul li */
#siteNavigation ul ul li {
height: 22px; /* height of second level list element matched to image height */
position: relative; /* IH_added for 3rd level */
}
/* IH_next added for 3rd level */
#siteNavigation ul ul li:hover ul ul { /* reveals third level when hovering on the first_IH */
visibility:visible;
}
#siteNavigation ul ul li a {
display: block;
height: 22px;
}
/* start of 3rd level */
/* ul ul ul*/
#siteNavigation ul ul ul {
visibility:hidden; /* to initially hide the drop down menu */
position:absolute;
top:0;
left: 111px; /*position subsubmenu */
width: 150px; /* width image */
z-index: 5;
background: red;
}
#siteNavigation ul ul ul a img { /* image dimensions */
display: block;
width: 150px;
height: 22px;
border: none;
}
/* ul ul ul li */
#siteNavigation ul ul ul li {
height: 22px; /* height of third level list element matched to image height */
}
