?
Solved

Horizontal DropDown Nav Bar rollover browser problems

Posted on 2006-05-22
18
Medium Priority
?
320 Views
Last Modified: 2012-06-27
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 */
0
Comment
Question by:JF0
  • 10
  • 8
18 Comments
 
LVL 5

Expert Comment

by:BobsRe
ID: 16736803
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
 
LVL 16

Author Comment

by:JF0
ID: 16737111
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
 
LVL 5

Accepted Solution

by:
BobsRe earned 2000 total points
ID: 16737353
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Expert Comment

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

  Bobby
0
 
LVL 16

Author Comment

by:JF0
ID: 16737579
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
 
LVL 5

Expert Comment

by:BobsRe
ID: 16737721
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
 
LVL 5

Expert Comment

by:BobsRe
ID: 16738122
Did that work out for your needs?
0
 
LVL 16

Author Comment

by:JF0
ID: 16738150
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
 
LVL 5

Expert Comment

by:BobsRe
ID: 16738177
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
 
LVL 16

Author Comment

by:JF0
ID: 16738244
just a local page right now, will put it up in the AM, its quitting time, have a good night.
0
 
LVL 5

Expert Comment

by:BobsRe
ID: 16738252
0
 
LVL 16

Author Comment

by:JF0
ID: 16742051
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
 
LVL 16

Author Comment

by:JF0
ID: 16742139
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
 
LVL 16

Author Comment

by:JF0
ID: 16742197
0
 
LVL 16

Author Comment

by:JF0
ID: 16742237
NVM, seems to work, must be an IIS issue or something, I will look into it.
0
 
LVL 16

Author Comment

by:JF0
ID: 16742475
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
 
LVL 5

Expert Comment

by:BobsRe
ID: 16744544
I just stepped in (had a late night)  Did you get it situated?

   Bobby
0
 
LVL 16

Author Comment

by:JF0
ID: 16745468
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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month14 days, 1 hour left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question