Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Feb 2009
    Posts
    2
    Member #
    18358
    So, I used the information from this list apart article to make some verticle drop down menus. I'm pretty happy with the results except in IE, where the rollover menu is unstable. You have to roll over the first menu item just right or the other menu items that appeared during the rollover disappear again too quickly. I followed the CSS and JS and everything else almost to a tea. I'm noticing this same problem in the example that the programmer who wrote the article gives. Sooo frustrating!

    I've been looking for a decent verticle/horizontal drop down menu option for years, and this is the closest I've come to anything working, but I can't seem to fix this one little bug. Can anyone help me? Or, do you have any better suggestions for a roll over menu?

    Here's a link to the website I'm working on: http://www.turtleshell.frih.net/index.html. Works fine in firefox, Safari, not so much in IE.

    This is the CSS:

    Code:
    div.menu {
    color: #fdbe00;
    text-align: left;
    float: left;
    font-weight: bold;
    }

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

    }

    #nav li {

    position: relative;
    width: 150px;
    }

    #nav li a {
    display: block;
    padding: 5px;
    border: 1px solid white;
    border-bottom: 0px;
    }

    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; }
    * html ul li a { height: 1%; }
    /* End */




    #nav li:hover ul, #nav li.over ul {
    display: block;
    width: 150px;
    padding-left: 0px;
    margin-left: 0px;
    border-bottom: 1px solid white;
    }





    #nav li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    list-style-type: none;
    }

    #nav li ul li {
    background-color: #0d1549;
    }


    #nav li.top {
    margin-top: 25px;
    }

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    For starters there a typo here

    #nav li:hover ul, #nav li.over ul {

  4. #3
    Junior Member
    Join Date
    Feb 2009
    Posts
    2
    Member #
    18358
    Ok, what should it say? That was taken from the example I used.

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    hover, there's no selector called "over"!

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Whoa!!! My bad, that is a class with over. So don't change it. Let me load it up and take a look.

    Also is your problem in all IE's or just 6 or 7?

  7. #6
    Junior Member
    Join Date
    Jan 2010
    Location
    Scarborough, UK
    Posts
    13
    Member #
    20900
    Have you tried making a nav bar in flash and writing accompyning script for it? although its harder and more time consuming it may give you better results in all browsers. all in all the nav bar looks good and wors well in the link you have but I feel that flash could enhance it a bit more and improve its useability. please write back if you think im wrong (i could well be lol) or if you wish to discuss this

  8. #7
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    11 month bump?
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com