Grow your CSS skills. Land your dream job.

Submenu Help

  • # August 5, 2008 at 9:31 am

    Hey guys I need some assistance. I took the advice given yesterday and I reworked the header and menu for the site. Hopefully it is better now.

    Ok so here is the issue. Below the main menu in the light purple area I want my sub-menu to appear when you rollover the main menu. Do I use jQuery for this? If so, can someone start me off please. Or can I use CSS. Point me in the direction of what would be most efficient. Thanks.

    http://www.nucm.org

    # August 5, 2008 at 9:40 pm

    I guess the common name for that menu behavior is a "dropline" menu.

    Check out 4 examples from Stu Nicholls:

    http://www.cssplay.co.uk/menus/pro_dropline2-5.html

    # August 7, 2008 at 1:44 pm

    Chris thanks I used the link you referenced above. I am stuck again though and I am not sure what I a doing wrong. The submenu appears now but I cannot get it to fall below the main menu.

    The site:

    http://www.nucm.org

    My CSS for the menu:

    /*


    START menu


    */

    div#menu {
    height: 260px;
    background-image: url(‘../images/imgHeader.png’);
    background-repeat: no-repeat;
    list-style: none;
    z-index: 500;
    }

    div#menu div#table {
    display: table;
    margin: 0 auto;
    margin-top: 158px;
    }

    div#menu .selectmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table-cell;
    white-space: nowrap;
    }

    div#menu li {
    margin: 0;
    padding: 0;
    height: auto;
    float: left;
    }
    div#menu .selectmenu a#home {
    display: block;
    height: 58px;
    float: left;
    text-decoration: none;
    text-indent: -9999px;
    white-space: nowrap;
    background: url(‘../images/mainmenuHome.png’);
    background-repeat: no-repeat;
    width: 88px;
    }

    div#menu .selectmenu a#about {
    display: block;
    height: 58px;
    float: left;
    text-decoration: none;
    text-indent: -9999px;
    white-space: nowrap;
    background: url(‘../about/images/mainmenuAbout.png’);
    background-repeat: no-repeat;
    width: 95px;
    }

    div#menu .selectmenu li:hover a#home {
    background-image: url(‘../images/rolloverHome.png’);
    background-repeat: no-repeat;
    width: 88px;
    }

    div#menu .selectmenu li:hover a#about {
    background-image: url(‘../about/images/rolloverAbout.png’);
    background-repeat: no-repeat;
    width: 95px;
    }

    div#menu .selectsubmenu {
    display: none;
    }

    div#menu .submenu {
    display: inline;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    }
    div#menu .submenu_active a:hover {
    background: transparent;
    color: #f00000;
    }

    div#menu .selectmenu :hover .selectsubmenu {
    display: block;
    padding: 0;
    left: 0;
    text-align: center;
    }

    div#menu .selectmenu :hover .submenu li a {
    display: block;
    float: left;
    background: transparent;
    padding: 0 10px 0 10px;
    margin: 58px 0 0 0;
    white-space: nowrap;
    border: 0;
    }

    div#menu .selectmenu :hover .submenu li a:hover; {
    visibility: visible;
    }

    /*


    END menu


    */

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".