treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Need Help with nav menu list items and z-index

  • 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

    <div id="nav-main">
    <ul>
    <li class="nav-url"><a href="#" title="www.catalpha.com" target="_blank">www.catalpha.com</a></li>
    <li class="nav-bg"></li>
    <li class="nav-news"><a href="#" title="News">News</a></li>
    <li class="nav-contact"><a href="#" title="Contact Us">Contact</a></li>
    </ul>
    </div>


    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; }