asked on

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">

<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 */

BobsRe

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

JF0

ASKER

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.

ASKER CERTIFIED SOLUTION

BobsRe

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

BobsRe

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

Bobby

JF0

ASKER

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?

BobsRe

Stumped me for a sec. It seems that IE does not like the comment inside the style tag. change


</style>

to

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

BobsRe

Did that work out for your needs?

JF0

ASKER

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..

BobsRe

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.

JF0

ASKER

just a local page right now, will put it up in the AM, its quitting time, have a good night.

BobsRe

http://www.boundlesswebhosting.com/T2.php

JF0

ASKER

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?

JF0

ASKER

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?

JF0

ASKER

http://ransomnotes.org/jchris/test/3/menu8.htm

JF0

ASKER

NVM, seems to work, must be an IIS issue or something, I will look into it.

JF0

ASKER

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.

BobsRe

I just stepped in (had a late night) Did you get it situated?

Bobby

JF0

ASKER

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.