SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Drop down list

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down list

    Hello,

    I´m trying to create a Dropdown list to insert in a site, but there´s a strange bug within explorer version 6 that keeps the sub-list from disapearing after I click I rollover the main list. I´d like to know if there´s a script or css code to fix that. The code is down below.

    Thanks!

    <html>
    <head>
    <style type="text/css">

    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }

    ul li {
    position: relative;
    }

    li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    }

    ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */

    li:hover ul, li.over ul { display: block; )
    </style>

    <script type="text/javascript">
    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>
    </head>

    <body>
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Offices</a></li>
    </ul>
    </li>
    <li><a href="#">Services</a>
    <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Internet Markting</a></li>
    <li><a href="#">Hosting</a></li>
    <li><a href="#">Domain Names</a></li>
    <li><a href="#">Broadband</a></li>
    </ul>
    </li>
    <li><a href="#">Contact us</a>
    <ul>
    <li><a href="#">United Kingdom</a></li>
    <li><a href="#">France</a></li>
    <li><a href="#">USA</a></li>
    <li><a href="#">Autralia</a></li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a typing error in your js here
    Code:
    this.className=this.className.replaceģ
    (" over", "");
    It should be like this:
    Code:
    this.className=this.className.replace(" over", "");
    You have also put an incorrect closing bracket on your very last style. You used one of these ) instead of one of these}

    That should fix the drop down for you

    paul

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    You have a typing error in your js here
    Code:
    this.className=this.className.replaceģ
    (" over", "");
    It should be like this:
    Code:
    this.className=this.className.replace(" over", "");
    Javascript is whitespace-insensitive (how HTML is supposed to be), so that wouldn't really matter. The right-angle double-quote might be a problem though, assuming it's not just some artifact left over from his text editor.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •