Vertical Menu Falling Off in IE

JavaScript
1

I am a newbie to Sitepoint, and relatively new to CSS and JS. I am using a script from Dynamic Drive and have posted this on their forum as well, with no luck. The menu looks great in every browser but IE. When you hover over the parent page and the child pages show up, they go away when you start to scroll down. But if you scroll really slow, they stay up. Any idea of a fix? I am trying to avoid re-doing the whole thing.

Both the CSS and the HTML are below. The site is computerdepot-online.net

.vertmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 15px Verdana;
width: 220px; /* Main Menu Item widths */
}
 
.vertmenu ul li{
position: relative;
}
 
/* Top level menu links style */
.vertmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 5px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
 
.vertmenu ul li a:link, .vertmenu ul li a:visited, .vertmenu ul li a:active{
background-color: #3266cc; /*background of tabs (default state)*/
}
 
.vertmenu ul li a:visited{
color: white;
}
 
.vertmenu ul li a:hover{
background-color: #7c1d1d;
}
 
/*Sub level menu items */
.vertmenu ul li ul{
position: absolute;
width: 220px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}
 
.vertmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}
 
 
/* Holly Hack for IE \\*/
* html .vertmenu ul li { float: left; height: 1%; }
* html .vertmenu ul li a { height: 1%; }
/* End */

<div class="vertmenu">

<ul id="vertmenu1">
<li class="page_item page-item-2 current_page_item"><a href="http://www.computerdepot-online.net" title="Main Page">Main Page</a></li>
<li class="page_item page-item-22"><a href="http://www.computerdepot-online.net/our-services/" title="Our Services">Our Services</a>
<ul>
	<li class="page_item page-item-101"><a href="http://www.computerdepot-online.net/our-services/virusspywaremalware-removal/" title="Virus/Spyware/Malware Removal">Virus/Spyware/Malware Removal</a></li>
	<li class="page_item page-item-106"><a href="http://www.computerdepot-online.net/our-services/home-wireless-networking/" title="Home Wireless Networking">Home Wireless Networking</a></li>
	<li class="page_item page-item-110"><a href="http://www.computerdepot-online.net/our-services/data-recovery/" title="Data Recovery">Data Recovery</a></li>
	<li class="page_item page-item-112"><a href="http://www.computerdepot-online.net/our-services/hardware-upgrades/" title="Hardware Upgrades">Hardware Upgrades</a></li>

	<li class="page_item page-item-116"><a href="http://www.computerdepot-online.net/our-services/laptop-repair/" title="Laptop Repair">Laptop Repair</a></li>
</ul>
</li>
<li class="page_item page-item-8"><a href="http://www.computerdepot-online.net/newsletter/" title="Our Newsletter">Our Newsletter</a></li>
<li class="page_item page-item-10"><a href="http://www.computerdepot-online.net/testimonials/" title="Testimonials">Testimonials</a>
<ul>
	<li class="page_item page-item-55"><a href="http://www.computerdepot-online.net/testimonials/share-your-opinion/" title="Share Your Opinion">Share Your Opinion</a></li>
</ul>
</li>
<li class="page_item page-item-71"><a href="http://www.computerdepot-online.net/audio-testimonials/" title="Audio Testimonials">Audio Testimonials</a></li>

<li class="page_item page-item-5"><a href="http://www.computerdepot-online.net/latest-news/" title="Latest News">Latest News</a></li>
<li class="page_item page-item-47"><a href="http://www.computerdepot-online.net/request-contact/" title="Request Contact">Request Contact</a></li>
<li class="page_item page-item-121"><a href="http://www.computerdepot-online.net/make-an-appointment/" title="Make An Appointment">Make An Appointment</a></li>
<li class="page_item page-item-39"><a href="http://www.computerdepot-online.net/our-warranty-policy/" title="Our Warranty Policy">Our Warranty Policy</a></li>
<li class="page_item page-item-67"><a href="http://www.computerdepot-online.net/about-us/" title="About Us">About Us</a>
<ul>
	<li class="page_item page-item-84"><a href="http://www.computerdepot-online.net/about-us/the-business/" title="The Business">The Business</a></li>
	<li class="page_item page-item-86"><a href="http://www.computerdepot-online.net/about-us/map-and-directions/" title="Map and Directions">Map and Directions</a></li>

	<li class="page_item page-item-89"><a href="http://www.computerdepot-online.net/about-us/contact-us/" title="Contact Us">Contact Us</a></li>
</ul>
</li>
</ul></div>
2

Hi, if you have the dropdown happening in JS (which it looks like considering your CSS contains nothing to do a dropdown) then you need the JS section :). I’ll ask for a move.

3

Sorry. I was wondering if the problem was in my CSS. I keep seeing things about hover problems in IE. Do you think the issue is with my JS?

4

I would think so considering the actual dropdown isn’t even done in JS, although I only looked at the code you posted, nothing else. So if you left off an important portion of CSS then…;).

Although I am pretty confident it is JS :).

5

Ok. Nope, didn’t leave off any big CSS. Just strange that it works fine in everything except IE. Should I repost in JS forum?

6

I’ve asked for a move so just sit tight for a little bit and it will get moved :). I’ll pm another moderator (whose actually on :))
PS-If something is working in other browsers, but not IE, don’t think that’s strange :slight_smile:

7

Thread moved… can you post your JS so we can have full info of what’s going on? Thanks :smiley:

8

Thanks everyone.

Here is the JS.


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

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

function initvertmenu(){
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
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  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
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

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

I don’t see anything particularly wrong in the code but I will have a closer look to this when I return from work.

10

Would you be open to the idea of finding a new script?

11

Thanks everyone. I did jump to a new script, and went with the superfish script here - http://users.tpg.com.au/j_birch/plugins/superfish/

It works, except for IE6.

Also, I can’t get the arrows to show up. Anyone have any ideas?

12

The demo works for me on IE6.

Perhaps it’s something to do with the changes that you’re made?

13

Hi, if you are using multiple IEs to replicate IE6, hen it won’t work because that is a very broken program.

If you are using IE6, then something is amiss on your end because it works for us :slight_smile:
As to the arrows, you set an indicator class for it, however nowher in your HTML can that class be found? :slight_smile:

14

PMW57 - The only changes I made were to colors in the CSS. That shouldn’t cause the problem.

RyanReese - I only have one instance of IE on one machine that I am testing on. My site works for you in IE6?

I will check on the class for the arrows. Thanks.

15

What I see on your site is that $ isn’t defined. jQuery needs to be loaded before the superfish script.

Off Topic:

(super-patiently waiting for hiccups to go away without making use of typical solutions)

16

Thanks everyone. That last hint did the trick. Evidently wordpress needs the no conflict line in there when initializing the script.

<!-- initialise Superfish -->
<script type="text/javascript"> 
 var $j = jQuery.noConflict();
     $j(document).ready(function(){ 
        $j("ul.sf-menu").superfish({ 
            animation: {height:'show'},   // slide-down effect without fade-in 
            delay:     1200,              // 1.2 second delay on mouseout 
            autoArrows: true,
            dropShadows: false
        }); 
    }); 
 
</script>

Now it works like a champ.