1. Start up code

This is the start up code that shows the different elements that are to be used.

div #mainbox_1 .itemshadow {
background:blue;
padding:20px; /* Code used temporarily for clarification */
}
div #mainbox_1 .itembox{
background:green;
}
div #mainbox_1 .itemboxsub{
background:yellow;
}
div #mainbox_1 .itemsubsub{
background:red; /* Code used temporarily for clarification */
}
div #mainbox_2{
margin-top:500px; /* Code used temporarily for clarification */
}

2. Adjust top tab

Adding this code will adjust the size of the top tab that will become the "Nav Button"

div #mainbox_1 .itemboxsub{
background:yellow;
width:150px;
}
.itemsubsub{
display:none;
}

3. Moving .itemshadow into position

This code will move the .itemshadow over the "Nav Button"

.itemshadow {
position:relative;
top:-30px;
border:thin solid white; /* Code used temporarily for clarification */
background:none;
padding:20px;
}

4. .itemshadow resizing

Reducing the .itemshadow size to be the same size as the "Nav Button" with exception of a 20px overhang on the right hand side.



div #mainbox_1 .itemshadow {
position:relative;
top:-30px;
height:30px;
width:170px;
border:thin solid white;
background:none;
padding:20px;
}

5. Positioning .itembox

This code will position the .itembox across to the right outside of the "Nav Button" but still covering the 20px overhand from the previous step.

div #mainbox_1 .itembox{
position:relative;
width:20px;
height:30px;
padding:0;
margin:0;
left:150px;
background:green;
}

6. Hiding the Text and Pictures

Code hides the contents of the .itembox. this is done to neaten up the display when seen on IE.

div #mainbox_1 .itembox{
position:relative;
width:20px;
height:30px;
padding:0;
margin:0;
left:150px;
background:green;
overflow:hidden;
}

7. Opacity and Hover state

Zero opacity is now introduce to the .itembox to make it "disapear" when inactive. Opacity is then brought back when the mouse hovers over the "Hot Spot"

div #mainbox_1 .itembox{
position:relative;
width:20px;
height:30px;
padding:0;
margin:0;
left:150px;
background:green;
opacity:0;
}
div #mainbox_1 .itembox:hover{
width:500px;
height:auto;
opacity:1;
}

8. The indicator

An image is then introduced and place above the "Hot Spot" this is to show the user where they need to place the mouse. (note: without doing this the user will be confused as to what to do when they go to your page)

div #mainbox_1 .itemshadow {
position:relative;
top:-30px;
height:30px;
width:170px;
background:url(http://arrow_image);
background-repeat:no-repeat;
background-position:right;
}

9. Hover state for .itemshadow

This is a duplication of step 7 applied to the .itemshadow. I do this to present the belief that the button itself is animated when hovered over. In reality it is the .itemshadow however because its transparent the user is none the wiser.

div #mainbox_1.itemshadow {
position:relative;
top:-30px;
height:30px;
width:170px;
background:url(http://arrow_image);
background-repeat:no-repeat;
background-position:right;
opacity:0;
}
div #mainbox_1.itemshadow:hover {
opacity:1;
}