Forums

Dropdown Menu goes behind the Page Title (6 posts)

  1. cleop87
    Member
    Posted 7 months ago #

    Hello Everyone,
    Hopefully this will be an easy fix.

    My info:
    Site: http://giftsrus.org/halloween-costumes
    Browser: IE 7.0.6001.18000

    Issue:
    If you go to the site above and hover over the drop-down menu button (Halloween Costumes & Accessories), you will see that the drop-down list goes behind the page title. This of course is not desirable and I plan to add more pages to this drop-down button and the other buttons.

    It works fine in Firefox so I’m assuming it is an IE7 issue. If so, (other than upgrading to a more current IE), I don’t know how to fix it so other visitors to the site (with IE7) will be able to see the drop-down menu as it should be..

    Any suggestions would be greatly appreciated.
    Thx,
    Cleop87

  2. vtxyzzy
    Member
    Posted 7 months ago #

    Sorry, but I can't tell where the dropdown menu button is supposed to be.

  3. cleop87
    Member
    Posted 7 months ago #

    Hi vtxyzzy,

    I'm using the "A Simple Love" childtheme for the "Thematic" theme.

    The child theme has a row of buttons (page links) at the top of the page (e.g. HOME, HALLOWEEN COSTUMES & ACCESSORIES, CAMERAS & VIDEO, etc.). Please go to the HALLOWEEN COSTUMES & ACCESSORIES page. I ask this because the title is longer. Once you're on that page, hover over the HALLOWEEN COSTUMES & ACCESSORIES button at the top to display the dropdown menu. The dropdown menu will show the various "child" pages and you will see that the dropdown menu items will go behind the "Page Title."(HAALOWEEN COSTUMES & ACCESSORIES).

    I could shorten the title but that would only be a temporary fix and I'd like to know how to change whatever code I need to change to make it a permanent fix. Any suggestions would be appreciated.

    cleop87

  4. orpatech
    Member
    Posted 7 months ago #

    Increase the Z-index value of your Menu

  5. cleop87
    Member
    Posted 6 months ago #

    Thx orpatech.com.

    I've increseed the z-index via the "editor" in the "Appearance" section. I'm using "A Simple Love" theme which is the child theme for Thematic. It uses the SuperFish (sf.menu). The "menu" portion in the editor looks like this:

    .sf-menu,.sf-menu * {
    list-style : none;
    margin : 0;
    padding : 0;
    }
    .sf-menu {
    line-height : 13px;
    }
    .sf-menu ul {
    position : absolute;
    top: -999em;
    width : 16em;
    }
    .sf-menu ul li {
    width : 100%;
    postition : relative;
    z-index : 100;
    }
    .sf-menu li:hover {
    visibility : inherit;
    }
    .sf-menu li {
    float : left;
    position : relative;
    }
    .sf-menu a {
    display : block;
    position : relative;
    }
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    left : 0;
    top : 12px;
    }
    ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {
    top : -999em;
    }
    ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
    left : 16em;
    top : 0;
    }
    ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
    top : -999em;
    }
    ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {
    left : 16em;
    top : 0;
    }
    .sf-menu a {
    font-family : Helvetica,Arial,Verdana,sans-serif;
    padding : 9px 20px;
    text-decoration : none;
    text-transform : uppercase;
    }
    .sf-menu a,.sf-menu a:visited {
    color : #666;
    }
    .sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active {
    background : #f0f0f0;
    outline : 0;
    }
    .sf-menu ul {
    border-bottom : 1px solid #96d1e2;
    border-left : 1px solid #96d1e2;
    border-right : 1px solid #96d1e2;
    }
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {
    top : 31px;
    }
    .sf-menu ul ul {
    margin-top : 0;
    }
    .sf-menu ul a {
    background : #f0f0f0;
    border-bottom : 1px solid #fff;
    border-bottom : none;
    border-right : 1px solid #fff;
    }
    .sf-menu ul a:hover {
    border-bottom : 1px solid #fff;
    border-right : 1px solid #fff;
    color : #FF4B33;
    }

    I've tried increasing the z-index in various portions of the menu so many time I'm not sure which ones I've changed. I know I should have kept better notes. Any suggestions would be appreciated.

    Thx,
    cleop87

  6. Josh
    Member
    Posted 6 months ago #

    I'm not seeing what you are talking about in your first post. Where is the drop-down menu?

Reply

You must log in to post.

About this Topic