View Full Version : DD: Nested Submenu - Submenu not appearing on IE 6 operating system

12-17-2009, 02:17 PM
1) Script Title: Nested Submenu

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

3) Describe problem:confused:: Co-worker was viewing website, using IE 6 and menu items with "submenu" items were not appearing. Anyone know what I am missing?

Also too, I am working on placing the source information on my pages - - where exactly should I place it? I have placed in on my main html page with the <!-- --> around it and it will not stay put. Tends to disappear on me.

Also, I would like the submenu to appear more to the left of the main menu, but, when I change the code, based on the operating systems other users are opening up this page with, either the submenu doesn't appear or it is way off in the middle of the page. Any help with these items would be GREATLY appreciated?

The menu I am using is based off of this menu. Would it be better if I scrap my creation and use this one with the javascript? I have never worked with that before - - anyhelp as to how to get this in my document to work would be great too! Thank you!
Here is the site. www.fairmont.org. If you need to see the code or css sheets, please let me know. Thank you!

12-17-2009, 04:48 PM
There are a number of problems, solving the first causes others. First, you've left out the script that goes with this menu:

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)


This should go as the last thing before your closing </head> tag.

The primary UL element needs this id, and the div with the id 'menucontainer' should have no id, the one with the id 'menucontainer ul' should be 'menucontainer' (addition/changes highlighted):

<!-- ============ COLUMNS SECTION ============== -->
<!-- ============ Left Column ============== --><tr>
<td class="left" align="center" width="220">
<div id="menucontainer">
<ul id="sidebarmenu1">
<li><a class="button" href="docs/residents.htm">Residents</a>
<li><a href="docs/visitors.htm">Visitors</a>
<li><a href="docs/busin . . .

Next, in your stylesheet, remove position: relative from #menucontainer:

#menucontainer {
padding: 5px 6px 5px 5px;

text-decoration: none;
list-style-type: none;
background-color: #b9b9b9;

Remove the margin-left from #menucontainer ul ul and set its width to 200px:

#menucontainer ul ul {
visibility: hidden;
position: absolute;
margin-top: -2em;
width: 200px;

left: 0;
z-index: 2;

That's pretty much it except that your tour book will be off center. So add this to the stylesheet:

#tourbookdiv {
margin: 0 auto;

12-17-2009, 06:58 PM
What do you mean by tourbook?
Thank you for your help. I am going to try all of that right now. Thank you!:)

12-17-2009, 07:24 PM
Sorry - - - idiot me - - - - I guess I call that the video link on our end. Thank you so much for your help!!!! It is working on my end.