I have a menu that I've already set up with ALA's CSS Sprites2 (http:// www.alistapart.com/articles/sprites2/) now I have to add a drop down menu into the mix. What would be the best way to achieve this, or rather what would I need to change in the Superfish scripts to get this to work?
This is what I have for the HTML so far... <div id="header"> <ul class="nav current-about"> <li class="home"><a href="index.html">Home</a></li> <li class="about"><a href="#">About</a> <ul> <li><a href="#">Contact Us</a></li> </ul> </li> <li class="menu"><a href="#">Menu</a> <ul> <li><a href="#">Appetizers</a></li> </ul> </li> <li class="private_dining"><a href="#">Private Dining</a> <ul> <li><a href="#">Private Dine Options</a> <ul> <li><a href="#">Option 1</li> </ul> </li> <li><a href="#">Event Menu</a></li> </ul> </li> <li class="events"><a href="#">Events</a> <ul> <li><a href="#">Events</li> </ul> </li> <li class="merchandise"><a href="#">Merchandise</a> <ul> <li><a href="#">Merchandise</a></li> </ul> </li> </ul> </div> __________________________________________ And this is the CSS: .nav { width: 960px; height: 149px; background: url(../images/primenav_rollovers.jpg) no-repeat green; } .nav li { display: inline; } .nav li a:link, .nav li a:visited { position: absolute; top: 0; height: 149px; text-indent: -9000px; z-index: 10; } /*HOME*/ .nav .home a:link, .nav .home a:visited { left: 0; width: 270px; } .nav .home a:hover, .nav .home a:focus { background: url(../images/primenav_rollovers.jpg) no-repeat 0px -149px; } .nav .home a:active { background: url(../images/primenav_rollovers.jpg) no-repeat 0px -298px; } .current-home .home a:link, .current-home .home a:visited { background: url(../images/primenav_rollovers.jpg) no-repeat 0px 0px; cursor: default; } .nav-home, .nav-home-click { position: absolute; top: 0; left: 0px; width: 270px; height: 149px; background: url(../images/primenav_rollovers.jpg) no-repeat 0px 149px; } .nav-home-click { background: url(../images/primenav_rollovers.jpg) no-repeat 0px -298px; } /*ABOUT*/ .nav .about a:link, .nav .about a:visited { left: 270px; width: 114px; } .nav .about a:hover, .nav .about a:focus { background: url(../images/primenav_rollovers.jpg) no-repeat -270px -149px; } .nav .about a:active { background: url(../images/primenav_rollovers.jpg) no-repeat -270px -298px; } .current-about .about a:link, .current-about .about a:visited { background: url(../images/primenav_rollovers.jpg) no-repeat -270px -298px; cursor: default; } .nav-about, .nav-about-click { position: absolute; top: 0; left: 270px; width: 114px; height: 149px; background: url(../images/primenav_rollovers.jpg) no-repeat -100px -149px; } .nav-about-click { background: url(../images/primenav_rollovers.jpg) no-repeat -100px -298px; } /*MENU*/ .nav .menu a:link, .nav .services a:visited { left: 384px; width: 108px; } .nav .menu a:hover, .nav .menu a:focus { background: url(../images/primenav_rollovers.jpg) no-repeat -384px -149px; } .nav .menu a:active { background: url(../images/primenav_rollovers.jpg) no-repeat -384px -298px; } .current-menu .menu a:link, .current-menu .menu a:visited { background: url(../images/primenav_rollovers.jpg) no-repeat -384px -298px; cursor: default; } .nav-menu, .nav-menu-click { position: absolute; top: 0; left: 384px; width: 108px; height: 149px; background: url(../images/primenav_rollovers.jpg) no-repeat -384px -149px; } .nav-menu-click { background: url(../images/primenav_rollovers.jpg) no-repeat -384px -298px; } /*PRIVATE DINIG*/ .nav .private_dining a:link, .nav .private_dining a:visited { left: 492px; width: 174px; } .nav .private_dining a:hover, .nav .private_dining a:focus { background: url(../images/primenav_rollovers.jpg) no-repeat -492px -149px; } .nav .private_dining a:active { background: url(../images/primenav_rollovers.jpg) no-repeat -492px -298px; } .current-private_dining .private_dining a:link, .current- private_dining .private_dining a:visited { background: url(../images/primenav_rollovers.jpg) no-repeat -492px -298px; cursor: default; } .nav-private_dining, .nav-private_dining-click { position: absolute; top: 0; left: 492px; width: 174px; height: 149px; background: url(../images/primenav_rollovers.jpg) no-repeat -492px -149px; } .nav-private_dining-click { background: url(../images/primenav_rollovers.jpg) no-repeat -492px -298px; } /*EVENTS*/ .nav .events a:link, .nav .events a:visited { left: 666px; width: 117px; } .nav .events a:hover, .nav .events a:focus { background: url(../images/primenav_rollovers.jpg) no-repeat -666px -149px; } .nav .events a:active { background: url(../images/primenav_rollovers.jpg) no-repeat -666px -298px; } .current-events .events a:link, .current-events .events a:visited { background: url(../images/primenav_rollovers.jpg) no-repeat -666px -298px; cursor: default; } .nav-events, .nav-events-click { position: absolute; top: 0; left: 666px; width: 117px; height: 149px; background: url(../images/primenav_rollovers.jpg) no-repeat -666px -149px; } .nav-events-click { background: url(../images/primenav_rollovers.jpg) no-repeat -666px -298px; } /*MERCHANDISE*/ .nav .merchandise a:link, .nav .merchandise a:visited { left: 783px; width: 177px; } .nav .merchandise a:hover, .nav .merchandise a:focus { background: url(../images/primenav_rollovers.jpg) no-repeat -783px -149px; } .nav .merchandise a:active { background: url(../images/primenav_rollovers.jpg) no-repeat -783px -298px; } .current-merchandise .events a:link, .current-merchandise .events a:visited { background: url(../images/primenav_rollovers.jpg) no-repeat -783px -298px; cursor: default; } .nav-merchandise, .nav-merchandise-click { position: absolute; top: 0; left: 783px; width: 177px; height: 149px; background: url(../images/primenav_rollovers.jpg) no-repeat -783px -149px; } .nav-merchandise-click { background: url(../images/primenav_rollovers.jpg) no-repeat -783px -298px; } _____________________________ Right now the hover effect works just fine, but the drop down menus aren't visible—because of the -9000 text-indent on the css.