[jQuery] How Would You Use Superfish Drop Down Menus with CSS Sprites2?
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.