JoAnn
Here you go with the html page 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" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JoAnn</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<ul class="joann-menu">
<li>
<a href="#" class="active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a>
</li>
<li>
<a href="#"><span class="l"></span><span class="r"></span><span class="t">Menu Item</span></a>
<ul>
<li><a href="#">Subitem</a>
<ul>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
</ul>
</li>
<li><a href="#">Subitem</a></li>
<li><a href="#">Subitem</a></li>
</ul>
</li>
<li>
<a href="#"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
</li>
</ul>
</body>
</html>
then the css code:
/* begin Menu */
/* menu structure */
.joann-menu a, .joann-menu a:link, .joann-menu a:visited, .joann-menu a:hover
{
text-align: left;
text-decoration: none;
outline: none;
letter-spacing: normal;
word-spacing: normal;
}
.joann-menu, .joann-menu ul
{
margin: 20px 20px auto 150px;/*THIS POSITIONS THE MENU ON THE PAGE AREA*/
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.joann-menu li
{
margin: 0;
padding: 2px;/*THIS ADDS PADDING BETWEEN THE INDIVIDUAL MENU ITEMS IN MAIN AND SUB MENU*/
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background-color:red;/*LEAVING IN THIS BG COLOUR HELPS YOU SEE WHAT YOU ARE DOING TO YOUR MENU*/
}
.joann-menu li:hover
{
z-index: 10000;
white-space: normal;
}
.joann-menu li li
{
float: none;
}
.joann-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: none;
}
.joann-menu li:hover>ul
{
visibility: visible;
top: 100%;
}
.joann-menu li li:hover>ul
{
top: 0;
left: 100%;
}
.joann-menu, .joann-menu ul
{
min-height: 0;
}
.joann-menu ul
{
background-image: none;
padding: 10px 30px 30px 30px;
margin: 0 0 0 -30px;/*THIS AFFECTS THE DISTANCE BETWEEN THE MAIN MENU AND SUB ITEMS*/
}
.joann-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;/*THIS IS THE ALIGNMENT OF THE SUB-SUB-MENU*/
}
/* begin MenuItem */
.joann-menu a
{
position: relative;
display: block;
overflow: hidden;
height: 52px;
cursor: pointer;
text-decoration: none;
}
.joann-menu li
{
margin-right: 0;
margin-left: 0;
}
.joann-menu ul li
{
margin:0;
clear: both;
}
.joann-menu a .r, .joann-menu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 93px;
background-image: url('images/buttonshadowed.png'); background-repeat:no-repeat;
}
.joann-menu a .l
{
left: 0;
right: 0;
}
.joann-menu a .r
{
width: 400px;
right: 0;
clip: rect(auto, auto, auto, 400px);
}
.joann-menu a .t
{
margin: 0px 50px 30px 10px;/*PUTS DISTANCE BETWEEN THE MAIN MENU BUTTONS*/
color: #330578;
padding: 30px 50px 0px 0px;/*PUTS DISTANCE AROUND THE MAIN MENU BUTTONS*/
line-height: 45px;
text-align: left;
}
.joann-menu li:hover a .l, .joann-menu li:hover a .r
{
top: 1px;/*KEEPING THIS AT ZERO STOPS THE BUTTONS FROM JUMPING ON HOVER*/
}
/* end MenuItem */
/* begin MenuSubItem */
.joann-menu ul a
{
display: block;
white-space: nowrap;
height: 30px; /*MAXIMUM HEIGHT OF SUB AND SUBSUB ITEM BOX*/
width: 180px; /*MAXIMUM WIDTH OF SUB AND SUBSUB ITEM BOX*/
overflow: hidden;
line-height: 30px;
background-color: #ffffff;
border: 1px solid #E4C144; /*BORDER FOR SUB AND SUBSUB ITEM BOX*/
}
.joann-menu ul a, .joann-menu ul a:link, .joann-menu ul a:visited, .joann-menu ul a:hover
{
text-align: left; /*THIS POSITIONS THE TEXT IN THE SUB AND SUBSUB MENU ITEM BOX*/
text-indent: 12px;/*THIS MOVES THE TEXT IN FROM THE LEFT SIDE OF THE SUB AND SUBSUB ITEM BOXES*/
text-decoration: none;
line-height: 30px;
color: #0B16EF;/*TEXT COLOUR IN SUB AND SUBSUB ITEM BOX*/
margin: 1px 0px 0px 0px;/*THIS PUTS SPACE BETWEEN THE SUB AND SUBSUB ITEM BOXES*/
padding:0;/*THIS PUTS PADDING AROUND THE TEXT IN THE SUB AND SUBSUB ITEM BOXES*/
}
.joann-menu ul li:hover>a
{
color: green;/*HOVER TEXT COLOUR FOR SUB AND SUBSUB MENU ITEMS*/
border-color: #000000;/*BORDER COLOUR FOR SUB AND SUBSUB MENU HOVER BOXES*/
background-position: 0 -30px;
}
/* end MenuSubItem */
I only tried this out in Firefox so cannot guarantee for its behaviour in other browsers.
You will see that I only used your hover image for the main menu. You can stop that little hover jiggle/jump there by a simple pixel change.
I have added comments to help see you through the css. I have also used colours which are not your own but changing them yourself will help you to see what each refers to.
Oh No.......... how come the comments have disappeared????
JoAnn - in that case, I can only suggest you contact me directly so that I can zip file everything through to you.
Panic over.... I just found them in there!!!!
