View Full Version : Help with CSS Nav Sprite

11-14-2011, 05:48 PM
Hey everyone!

I am having trouble with my nav sprite. The sprite has a sub-nav which becomes visible to the user when you hover over [About] or [Info]. However, when you move into the sub-nav the hover effect I have for the sprite disappears and just the sub-nav is left displayed. I want the hover effect of the sprite to stay even when the user is in the sub-nav.

I can supply the sprite image but can I attach it to a post on here if I've only just joined the forum?

Any help would be appreciated. It's been driving me nuts!!!

Thanks! :)

Here is the HTML code:

<div id="nav_sprite">
<ul id="menu">
<li class="home"><a href="index.php">Home</a></li>
<li class="about"><a href="#">About</a>
<a href="who_we_are.php">Who we are</a> |
<a href="location.php">Location</a>
<li class="gallery" ><a href="gallery.php">Gallery</a></li>
<li class="info"><a href="#">Info</a>
<a href="minutes.php">Meeting minutes</a> |
<a href="local_info.php">Local info</a> |
<a href="useful_links.php">Useful links</a> |
<a href="smerg_cons_rev1-1.php">SMERG Constitution Rev 1.1</a>
<li class="contact"><a href="contact.php">Contact</a></li>

And here is the CSS:

#nav_sprite {
margin: 0 auto;
width: 760px;
height: 45px;

ul#menu {
margin: 0;
padding: 0;
list-style: none;
clear: both;
position: relative;

ul#menu li {
overflow: hidden;
text-indent: -9999px;
display: inline;
float: left;

ul#menu li a {
background: url(../images/nav_sprite2.png) no-repeat;
width: 100%;
height: 100%;
display: block;

#menu li.home { width: 152px; height: 45px; }
#menu li.home a { background-position: 0 0; }
#menu li.home a:hover { background-position: 0 -45px; }

#menu li.about { width: 152px; height: 45px; }
#menu li.about a { background-position: -153px 0; }
#menu li.about a:hover { background-position: -153px -45px; }

#menu li.gallery { width: 152px; height: 45px; }
#menu li.gallery a { background-position: -305px 0; }
#menu li.gallery a:hover { background-position: -305px -45px; }

#menu li.info { width: 152px; height: 45px; }
#menu li.info a { background-position: -457px 0; }
#menu li.info a:hover { background-position: -457px -45px; }

#menu li.contact { width: 152px; height: 45px; }
#menu li.contact a { background-position: -609px 0; }
#menu li.contact a:hover { background-position: -609px -45px; }

ul#menu li span {
text-indent: 20px;
z-index: 100;
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top: 45px;
display: none;
width: 760px;
background: #84ac49;

ul#menu li:hover span { display: block; }

ul#menu li span a {
background: #84ac49 !important;
margin: 0 10px;
display: inline;
font-size: 16px;
font-family: "Segoe UI", Arial, sans-serif;
font-weight: normal;
color: #fff;

ul#menu li span a:hover { text-decoration: underline; }

11-14-2011, 05:51 PM
Hello Aethyris,
It would help to have the image. I'm pretty sure you can post it here, try hosting it someplace like http://tinypic.com/ and link to it here.

11-14-2011, 05:58 PM
Hi Excavator,

Thanks for the quick response. Looks like I can attach an image :)

- Aethyris

11-14-2011, 06:33 PM
I'm not sure I can do that with the drops implemented as spans. That or it's the image instead of a background color...

I've got an example that works (http://nopeople.com/CSS%20tips/CSS_dropDownMenu-noImages/index.html) with a background color.

I'll play with this some more later...

11-14-2011, 08:08 PM
Thanks :) I know it can be done if you use solid blocks of colour and the previous area will still stay in a 'hovered' state by using li:hover. What if I used CSS3 gradients to achieve the effect I have in the nav instead of resorting to sprites?