Overlapping Lists as Navigation

  1. Make a navigation div
  2. Create an un-ordered list inside the navigation div giving
    each list element a unique class

    3. <div id="navigation">
    <ul>
    <li><a href="#" class="one">1</a></li>
    <li><a href="#" class="two">2</a></li>
    <li><a href="#" class="three">3</a></li>
    <li><a href="#" class="four">4</a></li>
    </ul>
    </div>

  3. Using CSS hide the bullets and text

    4. #navigation ul
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none; hides bullets
    }

    #navigation ul li a
    {
    text-decoration: none;
    text-indent: -9999px; hides text
    }

  4. Apply position:relative to the list (ul) and
    position:absolute to the links (ul li a)

    *this means that the absolute position of the links are
    relative to the list not the whole page

    5. #navigation ul
    {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    position: relative;
    }
    #navigation ul li a
    {
    display:block;
    text-decoration: none;
    text-indent: -9999px;
    display: block;
    position: absolute;
    }

  5. Create images to use for the links.

    Set the images as the background image for each link.
  6. Set a different height, width, and position for each link
    *this is why in step 2 we gave each link its own class

    7. #navigation ul li a.one *about link
    {
    background-image: url(about.png);
    background-repeat: no-repeat;
    height: 152px;
    width: 152px;
    margin-left: 450px;
    }
    #navigation ul li a.two*store link
    {
    background-image: url(store.png);
    background-repeat: no-repeat;
    height: 150px;
    width: 233px;
    left: 100px;
    }
    #navigation ul li a.three*contact link
    {
    background-image: url(contact.png);
    background-repeat: no-repeat;
    height: 154px;
    width: 183px;
    margin-left: 350px;
    }
    #navigation ul li a.four*home link
    {
    background-image: url(home.png);
    background-repeat: no-repeat;
    height: 150px;
    width: 150px;
    margin-left: 150px;
    }

  7. Add a top value on #navigation li a:hover
    to create the hover effect

    8. #navigation li a:hover
    {
    margin-top: -20px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 20px;
    padding-left: 0px;
    }

for full instructions visit: cssbake.com/cookbook/overlap-that-menu/