Hello SitePoint,
I am relatively new to HTML, and CSS, but I have been eager to learn and help work on my wife’s website. I am trying to figure out how to use an image with overlapping, and to create a drop down menu. I have been struggling with this for about 2 weeks or so trying to figure out and find help online in tutorials. If someone could offer me some help as to how I could fix this menu, it would be greatly appreciated.
Link:www.outercreations.com/billy
Thanks for your time. 
Oh wow, that’s just fantastic… I really can’t tell you how much I appreciate you helping me out. That’s just amazing, I can’t thank you enough for all the time you’ve put in to helping me make make the navigation bar work. Thanks so much.
Billy
I got that Nav#1 demo with the replacement text working in all browsers now. I had the z-indexes set on the anchors when they should have been set on the LI. They still have to be set manually for IE6/7 but they are working now.
Here is the revised code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Test #1 - Image Replacement Text</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
background:#FFF;
}
h1 {
font-size:1.6em;
margin:.5em 0 1em;
text-align:center;
}
/*==== Begin Nav Styles ====*/
#nav, #nav ul {
width:576px;
height:60px;
margin:0 auto;
padding:0;
list-style:none;
background:#000 url(sprite.png) no-repeat 0 0;
}
#nav li {
float:left;
position:relative;
}
#nav a {
float:left;
position:relative;
height:60px;
text-decoration:none;
font:bold .9em/60px arial,helvetica,sans-serif;
text-align:center;
color:#FFF;
}
#nav a:active,
#nav a:focus,
#nav a:hover { /*style for images off */
color:#000;
background:#0F0;
text-decoration:underline;
cursor:pointer; /* IE6/7 need this */
}
/*--- Set z-indexes manually for IE ---*/
#home {z-index:6}
#news {z-index:5}
#service {z-index:4}
#store {z-index:3}
#network {z-index:2}
#about {z-index:1}
/* all the anchor widths change on hover */
#home a {width:102px;}
#news a {width:75px;}
#service a {width:114px;}
#store a {width:85px;}
#network a {width:106px;}
#about a {width:94px;}
/* increase widths by 8px on hover */
#home a:hover {width:110px; margin-right:-8px;}
#news a:hover {width:83px; margin-right:-8px;}
#service a:hover {width:122px; margin-right:-8px;}
#store a:hover {width:93px; margin-right:-8px;}
#network a:hover {width:114px; margin-right:-8px;}
#nav a span {
position:absolute;
top:0;
left:0;
width:100%;
height:60px;/*image height*/
font-size:0;
}
#home a span {background:url(sprite.png) no-repeat 0 0;}
#news a span {background:url(sprite.png) no-repeat -102px 0;}
#service a span {background:url(sprite.png) no-repeat -177px 0;}
#store a span {background:url(sprite.png) no-repeat -291px 0;}
#network a span {background:url(sprite.png) no-repeat -376px 0;}
#about a span {background:url(sprite.png) no-repeat -482px 0;}
#home a:hover span {
width:110px;
background-position:0 -60px;
}
#news a:hover span {
width:83px;
background-position:-102px -120px;
}
#service a:hover span {
width:122px;
background-position:-177px -180px;
}
#store a:hover span {
width:93px;
background-position:-291px -240px;
}
#network a:hover span {
width:114px;
background-position:-376px -300px;
}
#about a:hover span {
width:102px;
background-position:-482px -360px;
}
/*==== Dropdown Styles ====*/
#nav ul {
position:absolute;
top:60px;
left:20px;
width:140px;
height:auto;
margin:0 0 0 -999em;/*hide the dropdown*/
background-image:none;
background-color:#000;
}
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:0;/*reveal the dropdown*/
}
#nav li#network:hover span,
#nav li#network.sfhover span{ /*hold the BG image open on the sublist parent*/
width:114px;
background:url(sprite.png) no-repeat -376px -300px;
}
#nav li#network li a {
height:auto;
width:120px;
padding:2px 10px;
background:none;
color:#FFF;
text-align:left;
font:bold .9em/1.5 arial;
}
#nav li#network li a:hover {
background:#0F0;
color:#000;
text-decoration:none;
}
</style>
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<h1>Nav Test #1 - Image Replacement Text</h1>
<ul id="nav">
<li id="home"><a href="#1">Home<span></span></a></li>
<li id="news"><a href="#2">News<span></span></a></li>
<li id="service"><a href="#3">Services<span></span></a></li>
<li id="store"><a href="#4">Store<span></span></a></li>
<li id="network"><a href="#5">Network<span></span></a>
<ul>
<li><a href="#">Forums</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</li>
<li id="about"><a href="#6">About<span></span></a></li>
</ul>
</body>
</html>
Hi,
I was able to get a couple of working examples put together using the sprite image I made earlier. It was pretty tricky with the list items overlapping each other on hover.
Ideally the best way to do this is to use an image replacement technique that allows the text to be visible for viewers with images turned off.
Nav Test #1 - Image Replacement Text
Due to the nature of the menu with the widths changing on hover and using negative margins I ran into the IE6/7 z-index bug. I had to set position:relative; on the parent LI to keep it visible with the negative margins but that tripped the bug. I’ll look into it some more later and see if I can find a workaround for it.
However I do have another version that works in all browsers but you will not get the replacement text if images are off. I went ahead and set up the sfhover script for IE6 in this one so the dropdown will work.
Nav Test #2 - No Image Replacement
Here is the code below in case those live examples get deleted and you need to refer back to it later.
Hope that helps 
Nav #1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Test #1 - Image Replacement Text</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
background:#FFF;
}
h1 {
font-size:1.6em;
margin:.5em 0 1em;
text-align:center;
}
/*==== Begin Nav Styles ====*/
#nav, #nav ul {
width:576px;
height:60px;
margin:0 auto;
padding:0;
list-style:none;
background:#000 url(sprite.png) no-repeat 0 0;
}
#nav li {
float:left;
position:relative;
}
#nav a {
float:left;
position:relative; /*set containing block for spans*/
height:60px;
text-decoration:none;
font:bold .9em/60px arial,helvetica,sans-serif;
text-align:center;
color:#FFF;
}
#nav a:active,
#nav a:focus,
#nav a:hover { /*style for images off */
color:#000;
background:#0F0;
text-decoration:underline;
cursor:pointer; /* IE6/7 need this */
}
/* all the anchor widths change on hover */
#home a {width:102px; z-index:6;}
#news a {width:75px; z-index:5;}
#service a {width:114px; z-index:4;}
#store a {width:85px; z-index:3;}
#network a {width:106px; z-index:2;}
#about a {width:94px; z-index:1;}
/* increase widths by 8px on hover */
#home a:hover {width:110px; margin-right:-8px;}
#news a:hover {width:83px; margin-right:-8px;}
#service a:hover {width:122px; margin-right:-8px;}
#store a:hover {width:93px; margin-right:-8px;}
#network a:hover {width:114px; margin-right:-8px;}
/*#about a:hover {width:102px; margin-right:-8px;} don't change the last one*/
#nav a span {
position:absolute;
top:0;
left:0;
width:100%;
height:60px;/*image height*/
font-size:0;
}
#home a span {background:url(sprite.png) no-repeat 0 0;}
#news a span {background:url(sprite.png) no-repeat -102px 0;}
#service a span {background:url(sprite.png) no-repeat -177px 0;}
#store a span {background:url(sprite.png) no-repeat -291px 0;}
#network a span {background:url(sprite.png) no-repeat -376px 0;}
#about a span {background:url(sprite.png) no-repeat -482px 0;}
#home a:hover span {
width:110px;
background-position:0 -60px;
}
#news a:hover span {
width:83px;
background-position:-102px -120px;
}
#service a:hover span {
width:122px;
background-position:-177px -180px;
}
#store a:hover span {
width:93px;
background-position:-291px -240px;
}
#network a:hover span {
width:114px;
background-position:-376px -300px;
}
#about a:hover span {
width:102px;
background-position:-482px -360px;
}
/*==== Dropdown Styles ====*/
#nav ul {
position:absolute;
top:60px;
left:20px;
width:140px;
height:auto;
margin:0 0 0 -999em;/*hide the dropdown*/
background-image:none;
background-color:#000;
}
#nav li:hover ul {
margin-left:0;/*reveal the dropdown*/
}
#nav li#network:hover span{ /*hold the BG image open on the sublist parent*/
width:114px;
margin-right:-8px;
background:url(sprite.png) no-repeat -376px -300px;
}
#nav li#network li a {
height:auto;
width:120px;
padding:2px 10px;
background:none;
color:#FFF;
text-align:left;
font:bold .9em/1.5 arial;
}
#nav li#network li a:hover {
background:#0F0;
color:#000;
text-decoration:none;
}
</style>
</head>
<body>
<h1>Nav Test #1 - Image Replacement Text <br>IE6/7 z-index bug</h1>
<ul id="nav">
<li id="home"><a href="#1">Home<span></span></a></li>
<li id="news"><a href="#2">News<span></span></a></li>
<li id="service"><a href="#3">Services<span></span></a></li>
<li id="store"><a href="#4">Store<span></span></a></li>
<li id="network"><a href="#5">Network<span></span></a>
<ul>
<li><a href="#">Forums</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</li>
<li id="about"><a href="#6">About<span></span></a></li>
</ul>
</body>
</html>
Nav #2 (working in IE6/7)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Test #2 - No Image Replacement</title>
<style type="text/css">
body {
margin:0;
padding:0;
font: 100%/1.4 arial,helvetica,sans-serif;
background:#FFF;
}
h1 {
font-size:1.6em;
margin:.5em 0 1em;
text-align:center;
}
/*==== Begin Nav Styles ====*/
#nav, #nav ul {
width:576px;
height:60px;
margin:0 auto;
padding:0;
list-style:none;
background:#000 url(sprite.png) no-repeat 0 0;
}
#nav li {
float:left;
position:relative;
}
#nav a {
float:left;
position:relative;/*ie6*/
height:60px;
text-indent:-999em;/*hide text off screen*/
text-decoration:none;
}
/* all these widths will change on hover */
#home a {width:102px}
#news a {width:75px}
#service a {width:114px}
#store a {width:85px}
#network a {width:106px}
#about a {width:94px}
/*hide the images off left and position them on hover*/
#home a, #news a,
#service a, #store a,
#network a, #about a {
background:url(sprite.png) no-repeat -600px 0;
}
#home a:hover {
width:110px;
margin-right:-8px;
background-position:0 -60px;
}
#news a:hover {
width:83px;
margin-right:-8px;
background-position:-102px -120px;
}
#service a:hover {
width:122px;
margin-right:-8px;
background-position:-177px -180px;
}
#store a:hover {
width:93px;
margin-right:-8px;
background-position:-291px -240px;
}
#network a:hover {
width:114px;
margin-right:-8px;
background-position:-376px -300px;
}
#about a:hover {
background-position:-482px -360px;
}
/*==== Dropdown Styles ====*/
#nav ul {
position:absolute;
top:60px;
left:20px;
width:140px;
height:auto;
margin:0 0 0 -999em;/*hide the dropdown*/
background-image:none;
background-color:#000;
}
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:0;/*reveal the dropdown*/
}
#nav li#network:hover,
#nav li#network.sfhover { /*hold the BG image open on the sublist parent*/
width:114px;
margin-right:-8px;
background:url(sprite.png) no-repeat -376px -300px;
}
#nav li#network li a {
height:auto;
width:120px;
padding:2px 10px;
background:none;
color:#FFF;
text-indent:0;
font:bold .95em/1.5 arial;
}
#nav li#network li a:hover {
background:#0F0;
color:#000;
}
</style>
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<h1>Nav Test #2 - No Image Replacement <br> works in IE6/7</h1>
<ul id="nav">
<li id="home"><a href="#1">Home</a></li>
<li id="news"><a href="#2">News</a></li>
<li id="service"><a href="#3">Services</a></li>
<li id="store"><a href="#4">Store</a></li>
<li id="network"><a href="#5">Network</a>
<ul>
<li><a href="#5-1">Forums</a></li>
<li><a href="#5-2">Contacts</a></li>
</ul>
</li>
<li id="about"><a href="#6">About</a></li>
</ul>
</body>
</html>
Hi Rayzur,
Well the reason I had the 2 different about images was to test and see which one I liked better. That’s the only real reason that I have 2 about, one is winged, the other is cut off as a test to see which one I preferred.
Well Here’s an update as to what I’ve got so far for my new nav menu with image sprites.
Hi,
Yes, that sprite image you are using now is much better, it looks like you can eliminate the “about” state at the very bottom since it is in there twice. The lower does not have the black BG so couldn’t it could be cut out? But the one above it does not show the green wing correctly.
I had set up a version of it using 60px as the height for all the states and I set a black background on the “about” state. The total height was 420px (7X60)
http://www.css-lab.com/test/sprite.png
I spliced the images from your first menu together to make it, I noticed there was a blemish at the top of the “services” state.
If you will set your sprite up like that so it includes the “about” state correctly it will make things much easier.
As far as the dropdown goes, it looks like you just need to put some resets in there for the sub ul. Let me look at it closer and see what is going on.
Well Here’s an update as to what I’ve got so far for my new nav menu with image sprites. I also have a drop down of sorts.
link: http://www.outercreations.com/billy/
<code>
test
</code>
Hey guys thanks for the responses, I have been converting my navigation menu with image sprites, and will make the submenu with the nested UL. Again I am going through the process of learning how to position the image correctly, will be an interesting Ordeal. I was using a gmap for the overlapping images, which seemed to work, but couldn’t figure out how to get that one dropdown menu from Network, so I am sort of stuck on that. But for now I guess I will try and figure out the image sprites unless someone can offer me details on how to make a dropdown menu from Network. Thanks
Hello Rayzur,
Let me correct my previous post, I understand the UL Nested submenu enough to make a drop down of some sorts. I was implying if anyone knew how to fix my previous navigation menu and could inform me as to how to add a drop down list. Otherwise I was going to be working on the navigation menu using Image sprites and UL and LI formatting.
but couldn’t figure out how to get that one dropdown menu from Network, so I am sort of stuck on that.
Hi,
Did you look at the first link I posted
View the page source to see how the nested ul goes in the LI that contains the dropdown.
This Example is about as simple as it gets.
The IE6 script is not in place yet in order to keep the basic code easy to understand.
Here’s another article about the suckerfish dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/
Hi mossay, Welcome to SitePoint
It looks like your using the Float Drop Method for the dropdown. That’s probably not the best method for someone new to CSS to be using but it is a good scriptless method for IE6 since it does not support li:hover.
It looks like you got the code from cssplay.co.uk, I know Stu uses that DL method with the “css click drop”. You don’t really need to be using a DL, you would be better off with a nested UL for your sublist.
You might want to become familiar with a simple suckerfish dropdown first before you dive into the float drop nav. However, if you are just going to have a single level dropdown then it won’t be to confusing with the float drop method.
It would also help if you would use a single sprite image that included the hover states rather than using six different images.