www.webdeveloper.com
Results 1 to 3 of 3

Thread: Navigation Bar help.. mouseover..

Hybrid View

  1. #1
    Join Date
    Oct 2007
    Posts
    15

    Navigation Bar help.. mouseover..

    It works fine when you move the mouse over each 'button' on the navigation bar. But, when you move the mouse away from the navigation bar, the last thing you were hovering over stays open and dropped down. How do I get it to disappear?

    Here's the code:


    <style type="text/css">
    <!--
    /* CSS issu des tutoriels www.alsacreations.com/articles */
    body {
    margin: 0;
    padding: 0;
    background: white;
    font: 70% verdana, arial, sans-serif;
    }
    dl, dt, dd, ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    #menu {
    position: absolute;
    top: 117;
    left: 100;
    z-index:100;
    width: 100%;
    }
    #menu dl {
    float: left;
    width: 7em;
    margin: 0 1px;
    }
    #menu dt {
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background: #000;
    border: 1px solid black;
    }
    #menu dd {
    border: 1px solid white;
    }
    #menu li {
    text-align: center;
    background: #8c0000;
    }
    #menu li a, #menu dt a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    height: 100%;
    border: 0 none;
    }
    #menu li a:hover, #menu dt a:hover {
    background: #8c0000;
    border: 1px solid white;
    }

    #site {
    position: absolute;
    z-index: 1;
    top : 70px;
    left : 10px;
    color: #ffffff;
    background-color: #ddd;
    padding: 5px;
    border: 1px solid black;
    }

    a {text-decoration: none;
    color: white;
    color: #ffffff;
    }
    -->
    </style>




    ----------------------------------------------------




    <div id="menu">
    <dl>
    <dt onmouseover="javascript:montre('smenu1');">District Home</dt>
    <dd id="smenu1">
    <ul>
    <li><a href="http://liberal.k12.mo.us/">Home</a></li>
    </ul>
    </dd>
    </dl>
    <dl>
    <dt onmouseover="javascript:montre('smenu2');">Academics</dt>
    <dd id="smenu2">
    <ul>
    <li><a

    href="http://district.liberal.k12.mo.us/district/el/Lists/Teacher%20Web%20Pages/AllItems.aspx">Elementary</a></li>
    <li><a

    href="http://district.liberal.k12.mo.us/district/ms/Lists/TeacherDepartment%20Web%20Pages/AllItems.aspx">Middle

    School</a></li>

    <li><a

    href="http://district.liberal.k12.mo.us/district/hs/Lists/TeacherDepartment%20Web%20Pages/AllItems.aspx">High

    School</a></li>
    </ul>
    </dd>
    </dl>
    </div>

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    To "get it to disappear" you need to add "onmouseOut" event handler as well.
    <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:cache('smenu2');" >Academics</dt>

    then define your function chache(lemenu){.... } to hide the submenu.

    Bonne chance!

  3. #3
    Join Date
    Oct 2007
    Posts
    15
    Alright, thanks.

    I decided to completely scrap that, after finding a different navigation bar.

    I appreciate the help!

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