Horizontal DropDown Nav Bar rollover browser problems

I have been working on tweaking the menu from http://pmob.co.uk for a couple of days now. The page is at http://www.ransomnotes.org/jchris/HorizontalDropDown.htm   (code listed below). I am trying to accomplish the top sections to always keep their BG image, and the bottom sections to be a solid color (as of right now that solid color is a 1px image) however IE/FF render the outcome differently. I suspect it has something to do with the way the css is set up and the javascript that is needed to get it to work in IE. Right now, FF is displaying it the way I want it, well not exactly-but it is displaying it the way I would like it to be so I can continue to tweak it some more. In IE, when you roll over a section, the entire list turns to the BG color/image, I just want the subs to do this. This also affects rollover states on the submenu (which is why I turned them off for now). If anyone could help me, I would appreciate it. Code:

========
WEB PAGE
=======

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.pmob.co.uk/temp/dropdown_horizontal2.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Horizontal Drop Down Menus</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<SCRIPT type=text/javascript>
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</SCRIPT>



<link rel="stylesheet" type="text/css" href="topmenu3.css" />

</HEAD>
<BODY>




<UL id=nav>


        <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Services1</A>
            <UL>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Web Design</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Internet Marketing</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Hosting</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Domain Names</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Broadband</A></LI>
            </UL>
        </LI>


        <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Services2</A>
            <UL>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Web Design</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Internet Marketing</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Hosting</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Domain Names</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Broadband</A></LI>
            </UL>
        </LI>


        <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Services3</A>
            <UL>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Web Design</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Internet Marketing</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Hosting</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Domain Names</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Broadband</A></LI>
            </UL>
        </LI>


        <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Services4</A>
            <UL>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Web Design</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Internet Marketing</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Hosting</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Domain Names</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Broadband</A></LI>
            </UL>
        </LI>


        <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Services5</A>
            <UL>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Web Design</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Internet Marketing</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Hosting</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Domain Names</A></LI>
                  <LI><A href="http://www.pmob.co.uk/temp/dropdown_horizontal2.htm#">Broadband</A></LI>
            </UL>
        </LI>
 



  </UL>      
      
      
      
      
      </BODY></HTML>


======
CSS
======

body {
background-color: Black;
      font: normal 11px verdana;
      }

ul {
      margin: 0;
      padding: 0;
      list-style: none;
      }

ul li {
      position: relative;
      float: left;
      width:95px;
}
      
li ul {
      position: absolute;
      left: 0; /* Set 1px less than menu width */
      top: auto;
      display: none;
      }


      
      /* Styles for Menu Items */
ul li a {
      display: block;
      text-decoration: none;
      text-align:center;
      color: #fff;
      padding: 20px;
      border: 0px solid #ccc;
      background-image: url(bg.jpg);

      }
      
/* commented backslash mac hiding hack \*/
* html ul li a {height:1%}
/* end hack */

/* this sets color of active dropdown list hover */
li:hover a, li:hover li a:hover, li.over li a:hover {
   color: #FFF;
   
}

/* this sets color of active dropdown list no hover */
li.over a, li:hover li a, li.over li a {
    color: #fff;
       background-image: url(bg2.jpg);
}
li ul li a { padding: 2px 5px;  } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
LVL 16
JF0Asked:
Who is Participating?
 
BobsReCommented:
Here I hace redone the code for you.  All you have to do is add your image:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type='text/css' media='all'>

#menu {
      font-size: small;
      width: 100%;
      float: left;
}
#menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 10em;
      float: left;
}
#menu a, #menu h2 {
      font-size: small;
      display: block;
      border-width: 1px;
      border-style: solid;
      border-color: #cccccc #888888 #555555 #bbbbbb;
      margin: 0;
      padding: 2px 3px;
}

#menu h2 {
      font-size: small;
      color: #ffffff;
      background: #105272;
      text-transform: uppercase;
      cursor: default;
}


#menu a {
      color: #ffffff;
      background: #105272;
      text-decoration: none;
}

#menu a:hover {
      color: #ffffff;
      background: #105272;
}
#menu li {
      position: relative;
}

#menu ul ul {
      position: absolute;
      z-index: 500;
      Left: 0;
      color: #ffffff;
      background: #105272;
}

#menu ul ul ul {
      top: 0;
      left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {
      display: none;
}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {
      display: block;
}


<!--[if IE]>
body {
behavior: url(csshover2.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
/* if required use em's for IE as it won't resize pixels */
}
<![endif]-->
</style>

</head>

<!--Start Body-->
<body>
<div id="menu">
<ul>
  <li><h2>CSS Drop Down Menus</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
        <ul>
          <li><a href="http://www.tanfa.co.uk/css/examples/css-dropdown-menus.asp" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
          <li><a href="http://www.tanfa.co.uk/css/examples/menu/" title="Plain HTML Code">Demonstration HTML</a></li>
          <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Vertical CSS Pop-Out Menu</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">tanfa Demo example</a>
        <ul>
          <li><a href="#">tanfa Tutorial</a><!-- link to seo vertical tut -->            
            <ul>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs1.asp" title="Vertical Menu - Page 1">Stage 1</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs2.asp" title="Vertical Menu - Page 2">Stage 2</a></li>                  
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs3.asp" title="Vertical Menu - Page 3">Stage 3</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs4.asp" title="Vertical Menu - Page 4">Stage 4</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs5.asp" title="Vertical Menu - Page 5">Stage 5</a></li>                  
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs6.asp" title="Vertical Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Horizontal Drop & Pop Menu</h2>
    <ul>
      <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
      <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs7.asp">tanfa Demo example</a><!-- fully working sample -->
        <ul>
          <li><a href="#">tanfa Tutorial</a><!-- link to horizontal tut -->            
            <ul>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs1.asp" title="Horizontal Menu - Page 1">Stage 1</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs2.asp" title="Horizontal Menu - Page 2">Stage 2</a></li>                  
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs3.asp" title="Horizontal Menu - Page 3">Stage 3</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs4.asp" title="Horizontal Menu - Page 4">Stage 4</a></li>
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs5.asp" title="Horizontal Menu - Page 5">Stage 5</a></li>                  
              <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs6.asp" title="Horizontal Menu - Page 6">Stage 6</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>                                          
</div>


</body>
</html>
0
 
BobsReCommented:
Why use javascript?  Take a look at this http://www.seoconsultants.com/css/menus/tutorial/.  I would recomend taking out the javascript, adding the htc file and modify your code above to work as such.  You have the code already customized above.  

  Hope that helps,
    Bobby
0
 
JF0Author Commented:
I have come across a menu that uses that method,, and am working with that in another example. I have enough knowledge to tweak colors and such, not enough to redo my code, that is why I asked my original question. I am trying to learn though.
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
BobsReCommented:
Ohh I did not put your list items in there.  If you need help with that let me know.

  Bobby
0
 
JF0Author Commented:
I copied that code, and ran it by itself, worked in FF. I got the csshover2.htc file and put it in the same directory, but still nothing happens in IE. Am I missing something?
0
 
BobsReCommented:
Stumped me for a sec.  It seems that IE does not like the comment inside the style tag.  change

<!--[if IE]>

 to

</style>
<!--[if IE]>
<style type='text/css' media='all'>

and

<![endif]-->
</style>

to

</style>
<![endif]-->
0
 
BobsReCommented:
Did that work out for your needs?
0
 
JF0Author Commented:
Still doesn't work, but I did get one of those popup boxes at the top asking to allow access or something like that, i chose Yes to allow and it still doesnt hover over. works good in FF though..
0
 
BobsReCommented:
Are you still using this page?  http://www.ransomnotes.org/jchris/HorizontalDropDown.htm

What page have you put the above at?  I double checked it.  I look at the source of your page and let you know what the diffrence is.
0
 
JF0Author Commented:
just a local page right now, will put it up in the AM, its quitting time, have a good night.
0
 
JF0Author Commented:
Beautiful. Is there a way to remove the bottom blue line when rendered in FF. I am going to go ahead and accept the answer. I will spend the next few hours trying to figure out exactly what does what and see if I can tweak a few colors here & there. I appreciate the help. Just one quick question if I could, could you explain:

div#menu ul ul ul li:hover ul {
      display: block;
}

I only count 2 layers of ULs, how do we get that many?
0
 
JF0Author Commented:
Well, It works fine on your hosted site, but still wont work on mine. I copied the source code exactly, and placed it in a directory with csshover.htc , still no dropdowns, i kept getting an error when trying to view it locally, so I put it on my local webserver and tried it that way. No error, but still no dropdown. Any idea as to what is wrong? Could you maybe zip the 2 files and upload them so I could try to figure out the problem?
0
 
JF0Author Commented:
NVM, seems to work, must be an IIS issue or something, I will look into it.
0
 
JF0Author Commented:
And for anyone that comes across this post and wonders about the blue line, it is just the BG image tiling, i set it to repeat-x instead.
0
 
BobsReCommented:
I just stepped in (had a late night)  Did you get it situated?

   Bobby
0
 
JF0Author Commented:
works fine on yours/my friends server (linux boxes) - doesnt seem to work on IIS. Didnt want to mess with it, im sure it is configurable.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.