Grow your CSS skills. Land your dream job.

Adding a drop down menu to sprite navigation

  • # October 23, 2009 at 3:26 pm

    What is the best way to add a drop down menu to a sprite based menu?

    existing menu url: http://www.juliepb.com (want to add 7 menu items to "services")

    Just adding an unordered list to this code seems to mess up the nav bar…. can’t even get to styling of the drop down.

    HTML (line 30):

    <div id="navbar">
    <ul id="nav">
    <li class="phone"><a href="#">PHONE</a></li>
    <li class="home"><a href="index.html">HOME</a></li>
    <li class="services"><a href="services.html">SERVICES</a></li>
    <li class="whyus"><a href="whyus.html">WHY US?</a></li>
    <li class="news"><a href="news.html">NEWS</a></li>
    <li class="contact"><a href="contact.html">CONTACT</a></li>
    <li class="search"><a href="search.html">SEARCH</a></li>
    </ul>
    </div>

    CSS (line 120):

    ul#nav li.services a:link,ul#nav li.services a:visited {
    width: 110px;
    background-image: url(../images/services.png);
    background-repeat: no-repeat;
    }

    Help or advice is greatly appreciated! – Julie

    # October 25, 2009 at 2:21 am

    Hi Julie,

    So it sounds like you want to learn how to do Drop Down Menus with CSS? (The Sprites don’t interfere with these menus too much.)

    There’s many ways to do drop down menus. I learned just by seeing how other people did it. A Quick search brought up a couple (hopefully useful) links to learn from:
    http://www.texaswebdevelopers.com/blog/ … asp?id=129
    http://pixelspread.com/blog/289/css-drop-down-menu

    Hope that helps. Feel free to ask about any specific parts of this if you run into trouble.

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

You must be logged in to reply to this topic.

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