CSS Gurus - please help with overlapping menu

**bopjo1** · Feb 21, 2011 21:50

CSS more than any other aspect of code - from Javascript to PHP - is more difficult to me. It drives me crazy!

I am attempting to code a menu with irregular shapes that overlap. I used some of the advice from this thread as a guide:

http://www.sitepoint.com/forums/show...46#post4741346

Here is my attempt:

http://bopjodesign.com/xactlyit/netaffinity/stages.html

As you can see, the "tails" of my 2nd, 3rd, and 4th arrows are not showing up on the hover event. My CSS is in the head of the document. What am I doing wrong? Please help if you can...

**Erik J** · Feb 22, 2011 02:31

You are doing it right, just not done all yet.

On link hover, just as you are doing on the angled right side also do on the angled left side, i.e. increase the width further and soak it up with negative left margin. Adjust background position accordingly.

**bopjo1** · Feb 22, 2011 04:10

Thanks for the reply. I tried what you suggested, but it doesn't seem to work. I get the exact same effect of the tails not showing on hover. I increased the width of the 2nd button on hover and give it a negative left margin like this:

#connect a:hover {
width: 216px; // 20px larger than before
margin-right: -20px // Same as before
margin-left: -20px // New
}

I then increased the width of the span on hover and adjusted the positioning of the background image:

#connect a:hover span {
background-position: -156px // 20px less than before -124px;
width: 216px; // 20px larger than before
}

I can see a shadow behind the "connect" button on the bottom, so I tried adding a high z-index but that didn't do anything.

You can see my work here:

http://www.bopjodesign.com/xactlyit/...ty/stages.html

**Paul O'B** · Feb 22, 2011 04:39

Hi,

I would simplify it a bit and absolutely place the anchors so that you can change the width on hover without affecting anything else.

As you are using a transparent png you have to be careful with the shadow compounding so I would shorten the height of the anchors so the bottom shadow isn't changed on hover.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#stages {
    position: absolute;
    width: 684px;
    height: 62px;
    left: 31px;
    top: 177px;
}
#sprite_holder, #sprite_holder ul {
    margin: 0px;
    padding: 0px;
    height: 62px;
    width: 684px;
    list-style-type: none;
    background: url(http://bopjodesign.com/xactlyit/netaffinity/images/stages.png) no-repeat 0 0;
}
#sprite_holder li {
    float: left;
    position:relative;
    height: 54px;
}
#sprite_holder a, #sprite_holder span {
    text-align: center;
    height: 54px;
    position: relative;
    text-decoration: none;
    width:100%;
    display:block;
}
#sprite_holder span {
    position: absolute;
    left:0;
    top:0;
    z-index:2;
}
li#research {width: 174px;}
li#connect {width: 176px;}
li#call {width: 176px;}
li#strengthen {width: 158px;}

#research a:hover {width: 180px;}
#connect a:hover {width: 200px;    left:-20px;}
#call a:hover {width: 210px;    left:-20px;}
#strengthen a:hover {width: 198px;left:-20px;}

#sprite_holder a:hover {z-index:99}

#sprite_holder span {background:url(http://bopjodesign.com/xactlyit/netaffinity/images/stages.png) no-repeat;}
#research span {background-position: 0px 0px;}
#connect span {background-position: -176px 0px;}
#call span {background-position: -352px 0px;}
#strengthen span {background-position: -526px 0px;}

#research a:hover span {background-position: -2px -62px;}
#connect a:hover span {background-position: -156px -124px;}
#call a:hover span {background-position: -330px -186px;}
#strengthen a:hover span {background-position: -506px -248px;}
</style>
</head>
<body>
<div id="stages">
    <ul id="sprite_holder">
        <li id="research"><a href="#">Research<span></span></a></li>
        <li id="connect"><a href="#">Connect<span></span></a></li>
        <li id="call"><a href="#">Call<span></span></a></li>
        <li id="strengthen"><a href="#">Strengthen<span></span></a></li>
    </ul>
</div>
</body>
</html>

You might be interested in a similar example here with explanation here.

**bopjo1** · Feb 22, 2011 08:12

Thank you so much Paul O'B - your method works perfectly! I discovered (late) last night that the assigned staggered z-indexes given to the <li> elements were causing the tails not to appear. I see how you assign a high z-index to the <a> elements on hover. Very nice. The solution of shortening the height of the <li> and <span> elements was genius and gets rid of the compounding shadow perfectly. (I only began noticing that late last night).

I will study your code more and use it a a guideline for future use in these kinds of situations. I was tearing my hair out and completely stumped. Surely this is an advanced use of CSS. It frequently amazes me how complicated things get for such a seemingly simply effect!

Thank you again for graciously taming this beast. I hope this thread will help others along the way.

**Paul O'B** · Feb 22, 2011 10:06

Glad you got it sorted and indeed things can get complicated when overlaps occur especially where transparency is also concerned.

However, when you think about it things need to be that way or they wouldn't work. It's all about control

**bopjo1** · Feb 22, 2011 10:28

I am beginning to rediscover CSS as a form of coding every bit as complex and powerful as PHP or Javascript, albeit in a completely different way. Just because its "front end" doesn't mean its not a highly sophisticated, complex and worthy skill in its own right.

User Tag List

Thread: CSS Gurus - please help with overlapping menu

Thread Tools

Display

CSS Gurus - please help with overlapping menu

Bookmarks

Bookmarks

Posting Permissions