Grow your CSS skills. Land your dream job.

Need Help with nav menu list items and z-index

  • # March 22, 2011 at 12:55 pm

    The hover state for “news” button needs to cover the “contact” button in the hover state. Now it just pushes it to the right. I tried experimenting with z-index but I can’t get it to work.

    Any suggestions?

    HTML

    CSS

    #nav-main {
    width: 840px;
    height: 22px;}

    #nav-main ul li {
    list-style-type: none;
    display: inline; }

    #nav-main ul li a {
    text-indent: -9999px;
    float: left;
    display: block; }

    #nav-main ul li.nav-url a {
    background-image: url(images/nav-url-240x44.jpg);
    width: 240px;
    height: 22px;
    background-position: bottom center; }

    #nav-main ul li.nav-url a:hover {
    background-image: url(images/nav-url-240x44.jpg);
    background-position: top center; }

    #nav-main ul li.nav-bg {
    background-image: url(images/nav-center-spacer.jpg);
    width: 385px;
    height: 22px;
    float: left;
    display: inline; }

    #nav-main ul li.nav-news a {
    background-image: url(images/nav-news-85x22.jpg);
    width: 85px;
    height: 22px; }

    #nav-main ul li.nav-news a:hover {
    background-image: url(images/nav-news-hover-215x22.jpg);
    width: 215px;
    z-index: 1000; }

    #nav-main ul li.nav-contact a {
    background-image: url(images/Nav-conact-us-130x44.jpg);
    width: 130px;
    height: 22px;
    background-position: bottom center;
    z-index: 50; }

    #nav-main ul li.nav-contact a:hover {
    background-image: url(images/Nav-conact-us-130x44.jpg);
    background-position: top center; }
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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