CSS Dop Down List Problem

Discussion in 'CSS' started by dthomas31uk, Feb 24, 2005.

0
  1. #1
    Hi, Have encountered a problem with my drop down list menu. Works fine in Firefox and IE6, but does not work in Netscape 7 and IE5MAC.

    Here is the code hope someone can help

    Cheers

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Heraldic Pottery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="Hp.css" rel="stylesheet" type="text/css">
    <style type="text/css">

    #vertnav {
    WIDTH: 122px; LIST-STYLE-TYPE: none
    }
    #vertnav UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
    }
    #vertnav LI {
    DISPLAY: block; LEFT: 0px; MARGIN-BOTTOM: 0px; WIDTH: 130px; BORDER-BOTTOM: 0px; POSITION: relative; BACKGROUND-COLOR: #515033
    }
    #vertnav A {
    PADDING-RIGHT: 1px; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; FONT: 13px verdana; BORDER-LEFT: #ffffff 1px solid; WIDTH: 150px; COLOR: white; PADDING-TOP: 1px; BACKGROUND-COLOR: #515033; TEXT-ALIGN: left; TEXT-DECORATION: none
    }
    #vertnav A:hover {
    COLOR: #cccccc; BACKGROUND-COLOR: #beb968
    }
    #vertnav UL {
    DISPLAY: none; LEFT: 152px; POSITION: absolute; TOP: 0px
    }
    #vertnav LI:hover UL {
    DISPLAY: block
    }
    #vertnav UL LI:hover UL {
    DISPLAY: block
    }
    HTML #vertnav LI {
    FLOAT: left; HEIGHT: 2%
    }



    </style>

    <SCRIPT type=text/javascript>

    activateMenu = function(vertnav) {

    /* currentStyle restricts the Javascript to IE only */
    if (document.all && document.getElementById(vertnav).currentStyle) {
    var navroot = document.getElementById(vertnav);

    /* Get all the list items within the menu */
    var lis=navroot.getElementsByTagName("LI");
    for (i=0; i<lis.length; i++) {

    /* If the LI has another menu level */
    if(lis.lastChild.tagName=="UL"){

    /* assign the function to the LI */
    lis.onmouseover=function() {

    /* display the inner menu */
    this.lastChild.style.display="block";
    }
    lis.onmouseout=function() {
    this.lastChild.style.display="none";
    }
    }
    }
    }
    }


    window.onload= function(){
    /* pass the function the id of the top level UL */
    /* remove one, when only using one menu */

    activateMenu('vertnav');
    }

    </script>

    </head>

    <body>






    <ul id="vertnav">
    <div align="left"></div>
    <li><a href="index.htm">Home</a></li>
    <div align="left"></div>
    <li><a href="Profile.htm">Profile</a></li>
    <div align="left"></div>
    <li><a href="Mugs1.htm">Mug Shapes</a></li>
    <li> <a href="#">Processes</a>
    <ul>
    <li><a href="Design.htm">Design</a></li>
    <li><a href="Printing.htm">Printing</a> </li>
    <li><a href="Decorating.htm">Decorating</a> </li>
    <li><a href="Despatch.htm">Despatch</a></li>
    <li><a href="MailOrder.htm">Mail Order</a></li>
    </ul>
    </li>
    <li><a href="Contact.htm">Contact</a></li>
    <li><a href="Products.htm">Products</a></li>
    <li><a href="openstock.htm">Open Stock/Retail</a></li>
    </ul>

    </div>

    </body>
    </html>
     
    dthomas31uk, Feb 24, 2005 IP
  2. branduin

    branduin Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    I don't have a solution for you as I don't have Netscape on this PC but I wanted to mention that when I view the menu in Firefox the boxes shorten and I am only able to view the top half of each word. In IE6 it looks fine and they are the correct height to fit each line/word. Might just be my machine but I wanted to let you know!
     
    branduin, Feb 25, 2005 IP
  3. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #3
    SEbasic, Feb 25, 2005 IP
  4. carowan

    carowan Peon

    Messages:
    473
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4

    I can attest to the ALA article, I took SE basics advice a few months ago, and used the ALA code on my site.

    I also found http://www.htmldog.com (run by one of the authors of the ALA article) has the updated version of the menus, both vertical and horizontal.

    This is my first CSS project and I (incredibly) didnt have any problems using it at all.
     
    carowan, Feb 25, 2005 IP