IE submenu sensitivity problems

[swiesman]

I'm having a few problems with IE displaying the menu tree properly and was hoping for some help. The website is www.wiesman.org/LBA. The main problem is that the menu's are too sensitive and disappear to quickly (in IE 7). In particular the "Membership" submenu "join" is difficult to get to in IE. There don't seem to be any problems with other browsers I've tested. There are also some slight display issues with the submenus in IE 5 & 6....the submenus don't fully display. If anyone can help it would be much appreciated. I'm totally new to webdesign.

Thanks
Scott

CSS Code


.menudiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 200px; /*Width of Menu Items */
border-bottom: 0px solid #ccc;
}

.menudiv ul li{
position: relative;
padding:0px 0 2px 0px; background: none;
}

/*Sub level menu items */
.menudiv ul li ul{
position: absolute;
width: 125px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.menudiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 0px 0px;
border: 0px solid #ccc;
border-bottom: 0;
}

.menudiv ul li a:visited{
color: black;
}

.menudiv ul li a:hover{
background-color: white;
}

* html .menudiv ul li { float: left; height: 1%; }
* html .menudiv ul li a { height: 1%; }


Header Code


<div class="menudiv">
<ul id="menu">
<li><a href="index.html"><img src="images/menu_button_1.jpg" alt="About Us" border="0"></a></li>
<li><a href="news.html"><img src="images/menu_button_2.jpg" alt="News" border="0"></a></li>
<li><img src="images/menu_button_3.jpg" alt="Events" border="0"></a>
<ul>
<li><a href="events-1.html"><img src="images/events-1.jpg" alt="CLE" border="0"></a></li>
<li><a href="events-2.html"><img src="images/events-2.jpg" alt="Calendar Of Events" border="0"></a></li>
</ul>
</li>
<li><img src="images/menu_button_4.jpg" alt="Resources" border="0"></a>
<ul>
<li><a href="resource-1.html"><img src="images/resource-1.jpg" alt="Bulletin Board" border="0"></a></li>
<li><a href="resource-2.html"><img src="images/resource-2.jpg" alt="External Links" border="0"></a></li>
</ul>
</li>
<li><img src="images/menu_button_5.jpg" alt="Membership" border="0"></a>
<ul>
<li><a href="member-1.html"><img src="images/member-1.jpg" alt="Board" border="0"></a></li>
<li><a href="member-2.html"><img src="images/member-2.jpg" alt="Members" border="0"></a></li>
<li><a href="member-3.html"><img src="images/member-3.jpg" alt="Join" border="0"></a></li>
</ul>
</li>
<li><a href="contact.html"><img src="images/menu_button_6.jpg" alt="Contact Us" border="0"></a></li>
</ul>
</div>

[robin9000]

Just a suggestion but I think you might find for such a small menu, that a better menu in this instance might be the accordion menu.

I think you should check it out. You can always make up some image files and change the look of it. They got some cool ones on here.

[swiesman]

Thanks. I tried this using an accordion....you can check it out at www.wiesman.og/LBA/index1.html, but the menus won't stay open in IE 6 or 7. Can anyone help?

Javascript code


// JavaScript Document
ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})


CSS Code


.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(images/glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(images/glossyback2.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}


Thanks
Scott

Oh and this is the HTML Code


<div class="logo">
<a href="#">www.Lawrencebar.org</a>
</div>
<div class="head">
<!--Place the menu div inside the head div -->
<div class="glossymenu">
<a class="menuitem" href="index.html">ABOUT US </a>
<a class="menuitem" href="news.html">News</a>
<a class="menuitem submenuheader" href="" >Events</a>
<div class="submenu">
<ul>
<li><a href="events-1.html">CLE</a></li>
<li><a href="events-2.html">Calendar</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="" >Resources</a>
<div class="submenu">
<ul>
<li><a href="resource-1.html">Bulletin Board</a></li>
<li><a href="resource-2.html">Links</a></li>
</ul>
</div>
<a class="menuitem submenuheader" href="" >Membership</a>
<div class="submenu">
<ul>
<li><a href="member-1.html">Officers</a></li>
<li><a href="member-2.html">Members</a></li>
<li><a href="member-3.html">Join</a></li>
</ul>
</div>
<a class="menuitem" href="contact.html">Contact Us</a>
</div>

<!--menu div to end here -->
</div>

[swiesman]

Found my problem.....had the script referenced twice in the HTML........I guess I should stop working at 1:00AM followed up by 5:30 AM :)

Thanks for the idea....should work great!
Scott