www.webdeveloper.com
Results 1 to 2 of 2

Thread: problem drop down menu

  1. #1
    Join Date
    Oct 2004
    Location
    Belgium
    Posts
    105

    problem drop down menu

    Can anyone help me, when I won't to choose an option from the dropdownmeu, I can't pick one where there is some text under it, id decollaps imediatly,???


    <html>
    <head>
    <title>Bellis Perennis</title>

    <script language = "javascript" src="rvjs.js">
    </script>

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

    <style type="text/css">

    body {
    font: normal 11px verdana;
    }

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

    ul li {
    position: relative;
    float: left;
    width:100px;
    }

    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;
    color: #777;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #ccc;
    }

    /* this sets all hovered lists to red */
    li:hover a, li.over a, li:hover li a:hover, li.over li a:hover {
    color: #fff;
    background-color: green;
    }

    /* set dropdown to default */
    li:hover li a, li.over li a {
    color: #777;
    background-color: #fff;
    }
    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
    li:hover ul, li.over ul
    { display: block; } /* The magic */


    div.iframe {
    width:746px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    background: #000000;
    }

    iframe#ifrm {
    border-left: solid 1px #E4E4E4;
    border-right: solid 1px #E4E4E4;
    border-bottom: solid 1px #E4E4E4;
    border-top: solid 1px #E4E4E4;
    }



    </style>
    </head>
    <body>
    <ul id="nav">
    <li><a href="home.html">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 Marketing</a></li>
    </ul>
    </li>
    <li><a href="#">Contact Us</a>
    <ul>
    <li><a href="#">United Kingdom</a></li>
    </ul>
    </li>
    </ul>

    <div class="iframe">
    <iframe name="ifrm" id="ifrm" src="home.html" width="742" height="200px" scrolling="no" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
    </div>

    </body>
    </html>
    Cya,
    CGG

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add width:100%; to ul li a
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles