Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS jQuery drop menu resizes the entire page?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #30097

    Hey guys

    I’ve taken over the build of our company problem, and have stumbled into a problem.

    I believe our previous designer may have used a script similar to the jQuery Drop Down example here on css-tricks. The footer seems to keep a huge gap below it, that disappears when you rollover the largest of the drop menus, and it zaps you to the top of the page, basically eliminating this gap. Then when you roll off it, the gap is back.

    If you keep the page scrolled right to the top, you can see the scroll bar change size as you toll over and off the menu.

    Check out the issue at http://www.m2technology.com.au
    The menu that causes the issues is “Business Solutions”

    Whats even more confusing is that the problem is only visible on big screens… I run two monitors, and on my smaller 1440×900 one it works fine, then drag the window over to my 1920×1080 and it shows the magic gap.

    Now i’m about to show you some horrifically messy code, so if you’ve got a weak heart, get your pills ready.

    This is the Nav bar in the xhtml


    And this is the CSS that seems to be referring to the drop menu

    .hidden { display: none; }

    .unhidden { display: block; }

    ul.dropdown,
    ul.dropdown li,
    ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    ul.dropdown {
    z-index: 597;
    float: left;
    padding:0;

    }

    ul.dropdown li {
    float: left;
    line-height: 0em;
    vertical-align: middle;
    padding:0;

    }

    ul.dropdown li.hover,
    ul.dropdown li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
    }

    ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
    }

    ul.dropdown ul li {
    float: none;
    }

    ul.dropdown ul ul {
    top: 1px;
    left: 99%;
    }

    ul.dropdown li:hover > ul {
    visibility: visible;
    }

    I figure the problem rests in the fact that the entire page is calculating the extra height of the menu when its hidden and adding it to the bottom, but I don’t know how or why.

    If anyone has some spare time to give me some suggestions, it would be greatly appreciated.

    Thanks guys!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.