Adding a drop down menu to sprite navigation

[juliepb59]

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

[AshtonSanders]

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.

[Author]

Posts