CSS - Drop Down Menu Problem With Hover State?

Hi all,

I've had this issue for a while now and can't for the life of me get a clean fix/understanding of whats wrong. I've had a few other Designers/Developers look at it with no look either!

http://www.hoctordesign.com/csstest/test.html has the code and details. I'm mainly concerned with issue 1.

This is that i can't get control of the hover state text color. It currently inherits a color which is need in other areas of the site. I need to over ride this but can't!

The second issue is that I can't control the space between the tabs.

Can anyone help?

Thanks!
Denis

I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;}

When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state.

http://www.graphics-tech.com/concept

There is the link for example.

Thanks

Hi everyone,

I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not.

I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located.

To get a visual you can check the website (just remove the *)
*onholdmusicsource*.com

In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.

Comments would be fine
Ideas would be great
Solutions would be fantastic

Many Thanks-

Hello,
I'm trying to create a menu for my NGO to replace the one they have currently but I'm running into some problems. The highlight color in this photo is one - how do you get around this issue? I'd like to keep the colors the same, if possible, but I recognize that might not be acceptable.

the menu img is at kburke - org slash menuhover.jpg


Thanks!
here's the code:

/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
font:11px Verdana, sans-serif;
font-weight:bold;
}

.sf-menu a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
color: #FFFFFF;
}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #ffffff;
}
.sf-menu li {
background: #b6791e;
}

.sf-menu li ul li a {
color: #769841;
}

.sf-menu li li a:active, .sf-menu li li a:focus {
color: #ffffff;
}

.sf-menu li li {
background: #ffffff;
}
.sf-menu li li li {
background: #ffffff;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #769841;
outline: 0;
color: #FFFFFF;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

Hiya,

Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default.

It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help? This is only happening in IE.

Full Code he

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=iso-8859-1" /> <title>Menu Problem</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <!-- The line below starts the conditional comment --> <!--[if IE]> <style type="text/css"> body {behavior: url(csshover.htc);} </style> <![endif]--> <!-- This ends the conditional comment --> </head> <body> <div class="container"> <p>First Active Tab:</p> <div class="nav"> <ul> <li class="active"><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> <p style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #000;">Middle Active Tab:</p> <div class="nav"> <ul> <li><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li class="active"><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> </div> </body> </html>

CSS He

Code:

/* CSS Document */ body{margin: auto; text-align: center; background: #fff; font-size: 80%;} .container{ margin: auto; padding-top: 6px; width: 1000px; text-align: left; background: #fff;} /* Main Menu */ .container .nav{background: #fff; height:68px; line-height:34px;left:0px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #fff; text-transform:uppercase;margin-left: 6px; } .container .nav ul{list-style: none; position:relative;} .container .nav ul li{display: inline; float: left; position:relative; font-size: 0.9em; } .container .nav ul li a{text-decoration:none; color:#fff; background: #A90100; padding-left: 20px; } .container .nav ul li a, .container #nav ul li a span{ display: block; float: left;} /* Hide from IE5-Mac \*/ .container .nav a, .container .nav a span{float: none} .container .nav ul li a:hover{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a span{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active ul{display: block;} .container .nav ul li a span{background: #A90100; padding-right: 20px; } .container .nav ul li a:hover span{text-decoration:none; color:#fff; background: #351405; } .container .container .nav li > ul {top: auto;left:auto;} .container .nav ul li ul{ display:none; position: absolute; width: 700px; left: 0px; top: 0px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-transform:none; font-weight: normal;} .container .nav ul li:hover ul{ z-index:100;} .container .nav ul li ul.item1{ left: 10px; z-index: 0;} .container .nav ul li ul.item2{ left: -67px; z-index: 0;} .container .nav ul li ul.item3{ left: -144px; z-index: 0;} .container .nav ul li ul.item4{ left: -221px; z-index: 0;} .container .nav ul li ul.item5{ left: -298px; z-index: 0;} .container .nav ul li ul.item6{ left: -375px; z-index: 0;} .container .nav ul li:hover ul.item1{z-index: 100;} .container .nav ul li:hover ul.item2{z-index: 100;} .container .nav ul li:hover ul.item3{z-index: 100;} .container .nav ul li:hover ul.item4{z-index: 100;} .container .nav ul li:hover ul.item5{z-index: 100;} .container .nav ul li:hover ul.item6{z-index: 100;} .container .nav ul li ul li{ display:inline; position: absolute; float: left; left:10px; top: 39px; height: 24px; line-height: 24px; width: 700px; float: left; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 1em; text-transform:none; font-weight: normal; background: #351405;} .container .nav ul li:hover ul {display: block;}

I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag.
So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file.
The url is this.
The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js.
If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites.
And it's annoying.
Can some one give me a hint please?
I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing...
Thanks in advance...

My nav menu works 100% in IE8, FF, Opera and Chrome... but it's doing something weird in IE7 that can kindof affect it's functionality but I have no idea really where to look for the problem.

It's most easily seen on two pages. The front page, he
http://www.skullcrow.com

...and on the product pages he
http://www.skullcrow.com/proddisp.php?id=skull01

On the main page when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser.

The main reason I need to fix this is that these menus will probably only get bigger and the navbar will become barely unusable in IE7 after a while.

I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction.

Thanks for any help.

check out parrisstudios(dot)com/mirage_framing

In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh.

I wan't to say it is like that peek-a-boo bug but backwards....

Code:

ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}

ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}

li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}

ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}

li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}

THANKS!

Hi,

I have implemented an Apple Style CSS menu however I cannot apply the active state on this. When the current page is displayed, I would like to the button to be highlighted (as if hovering) Can anyone help me please?

HTML
Code:

<ul id="nav">
          <li id="list1"><a href="#"><span>Home</span></a></li>
          <li id="list2"><a href="#"><span>Special Offer</span></a></li>
          <li id="list3"><a href="#"><span>Help</span></a></li>
          <li id="list4"><a href="#"><span>Delivery Information</span></a></li>
          <li id="list5"><a href="#"><span>Technical</span></a></li>
          <li id="list6"><a href="#"><span>About Us</span></a></li>
          <li id="list7"><a href="#"><span>Contact</span></a></li>
</ul>

CSS

Code:

* { margin: 0px; padding: 0px; }
 
#nav {
      background: url(nav.png);
      height: 38px;
      width: 960px;
      margin: 0 auto;
}
 
#nav span {
     display: none;
}

#nav li {
    list-style-type: none;
    float: left;
}
 
#nav a {
    height: 38px;
    display: block;
}

#list1 { width: 114px; }
#list2 { width: 164px; }
#list3 { width: 112px; }
#list4 { width: 206px; }
#list5 { width: 130px; }
#list6 { width: 122px; }
#list7 { width: 112px; }



#list1 a:hover {
      background: url(nav.png) 0px -38px no-repeat;
}
 
#list2 a:hover {
      background: url(nav.png) -114px -38px no-repeat;
}
 
#list3 a:hover {
      background: url(nav.png) -278px -38px no-repeat;
}
 
#list4 a:hover {
      background: url(nav.png) -390px -38px no-repeat;
}
 
#list5 a:hover {
      background: url(nav.png) -596px -38px no-repeat;
}
 
#list6 a:hover {
      background: url(nav.png) -726px -38px no-repeat;
}
 
#list7 a:hover {
      background: url(nav.png) -848px -38px no-repeat;
}

I'm having an issue with getting my drop down menus to work in IE9. They work in chrome and other internet explorer browsers but for some reason they don't drop down in IE9.

This is my CSS coding:

div#menubar {
position: absolute;
top: 100px;
left: 150;
}

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode";
font-size:15px;
font-weight:bold;
}

.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}

.menu li{
float:left;
padding:0px;
}

.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:white;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a{
background: #F4FA58 url("images/hover.gif") bottom center no-repeat;
color:white;
text-decoration:none;
}

.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul{
display:block;
}

.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

.menu li:hover li a{
background:none;
}

.menu li ul a{
display:block;
height:35px;
font-size:13px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a{
background:#F4FA58 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:black;
text-decoration:none;
}

.menu p{
clear:left;
}


and the html coding is:

<div id="menubar">
<div class="menu">
<ul>
<li><a href="mindex.htm" target="_self">home</a></li>
<li><a href="mabout.htm" target="_self">about us</a></li>
<li><a href="designservices.htm" target="_self">design services</a>
<ul>
<li><a href="vectorconversion.htm" target="_self">vector art
conversion</a></li>
<li><a href="webdesign.htm" target="_self">web design</a></li>
<li><a href="customdesigns.htm" target="_self">custom designs</a></li>
<li><a href="databasedesign.htm" target="_self">database
design</a></li>
<li><a href="spreadsheetdesign.htm" target="_self">spreadsheet
design</a></li>
<li><a href="presentations.htm" target="_self">presentations and
forms</a></li>
<li><a href="embroidery.htm" target="_self">embroidery</a></li>
<li><a href="customtransfers.htm" target="_self">custom
clothing</a></li>
</ul>
</li>
<li><a href="photoservices.htm" target="_self">photography services</a>
<ul>
<li><a href="photosessions.htm" target="_self">photo sessions</a></li>
<li><a href="photoediting.htm" target="_self">photo editing</a></li>
<li><a href="videoediting.htm" target="_self">video editing</a></li>
<li><a href="galleries.htm" target="_self">galleries</a></li>
</ul>
</li>
<li><a href="partyplanning.htm" target="_self">party & wedding
planning</a></li>
<li><a href="mcontact.htm" target="_self">contact us</a></li>
</ul>
</div>
</div>

does anyone know what the issue is?

Ok. To more easily explain my problem with you guys, I have included a "Diagram" if you will of the problem.

Area 1 is the area where all my buttons and dropdown menus are.

Area 2 is the greatly overlapping "background" area that is invisible.

What I want is to have Area 2 behind Area 1 and the width and height of Area 2 barely exceed Area 1's.

This will allow me to call the "hide()" function for my drop down menus whenever the mouse "seems" to move away from buttons and the menu.

http://www.alexwait.com/Nortonville...ester/main.html

I've tried doing that, but as you can see, it hasn't worked out too well.
Any advice?

EDIT/UPDATE:
Ok. I've now got the box "behind" the menus and buttons like I want.
But when I move my mouse into another element... for some stupid reason I am getting the onMouseOut event being fired for the "behind" element.

Thanks again.

I have used suckerfish dropdown menu on this site herel

but in IE7 the 1st level links are to far left on the services menu.
Fine in firefox.

It will be something i missed

here is the css i used on the menu

Code:

/* Start Menu  */
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	
}

#nav a {
	display: block;
	width: 90px;
	text-decoration:none;
	color:#000000;
	font-size:11px;
	font-weight:400;
}

#nav li {
	float: left;
}

#nav li ul {
	position: absolute;
	width: 90px;
	left: -999em;
	background-color:#CCCCCC;
	
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}
		
#menu1 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu2 {
		float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu3 {
	float: left;
	width: 90px;
	padding-top:10px;
	font-size:11px;
	text-align:center;
	}
	
			#menu4 {
	float: left;
	width: 90px;
	padding-top:10px;
	font-size:11px;
	text-align:center;
	}
	
			#menu5 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
		
				#menu6 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
		#menu7 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu8 {
	float: left;
	width: 90px;
	height:33px;
	background-image:url(menu5.jpg);
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}
	
			#menu9 {
		background-image:url(menu6.jpg);
		background-repeat:no-repeat;
	float: left;
	width: 220px;
	height:33px;
	padding-top:15px;
	font-size:11px;
	text-align:center;
	}

/* End Menu */

this is doing my head in i just can't see it.

Hi guys,

I've written a drop-down menu, located here (there's only a drop down menu on the "Services" link in the menu.

Now, the menu works fine in FireFox, however it completely screws up in IE (I'm not too worried about the menu being put on the right in IE, just moreso about all the gaps its making).

To do the menu, I'm simply using an extra table for the drop down menu which has its display property set to none, and giving it the css property of "position: absolute;". Then when it is rolled over, it just changes to "display: block".

How would I go about fixing this?

Hi I have the following menu worlks fine in firefox etc but will not work in I.E 7 any ideas why?

I have searched hi and low about i.e 7 problems but can't find the answer.

Code:

<html>
<head>
<title></title>
<style type="text/css">
#mainmenu{
 width: auto;
 height: 30px;
}
#mainmenu{
 margin: 0px;
 padding: 0px;
 z-index: 1;
}
#mainmenu li{
 float:left;
 position:relative;
 width: 140px;
 border: 0px solid #fff;
 list-style: none;
 background: #336699;
 font-family: verdana;
 font-weight: bold;
 font-size: 14px;
 padding: 3px 10px 3px 10px;
}
#mainmenu li a{
 background: #336699;
 text-decoration: none;
 color: #000;
}
#mainmenu li a:hover{
 color: #ff0000;
}
#mainmenu li ul{
 display:none;
 position:absolute;
 margin: 0px;
 width: 140px;
 padding: 0px;
 list-style: none;
 top: 20px;
 left: 0;
 z-index: 2;
}
#mainmenu li:hover ul {
 display: block;
 width: 140px;
}
#mainmenu .drop {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .drop a{
background: #fff;
}
#mainmenu .dropb {
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
#mainmenu .dropb a{
background: #fff;
}
#mainmenu .dropt {
background: #fff;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px dashed #000;
}
#mainmenu .dropt a{
background: #fff;
}


</style>
</head>

<body>
<div id="mainmenu">
	<li>
		<a href="#">MENU 1</a>
		<ul>
			<li class="dropt"><a href="#">DROP DOWN 1</a></li>
			<li class="drop"><a href="#">DROP DOWN 2</a></li>
			<li class="dropb"><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 2</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">MENU 3</a>
		<ul>
			<li><a href="#">DROP DOWN 1</a></li>
			<li><a href="#">DROP DOWN 2</a></li>
			<li><a href="#">DROP DOWN 3</a></li>
		</ul>
	</li>
</div>

</body>
</html>

Hi, I am having problems with a jQuery suckerfish drop down menu. The HTML seems fine so I can only assume the problem is with the CSS. It is a vertical drop down menu with three levels, and level two is supposed to drop down to the right hand side of level one, but it is currently dropping straight down and overlapping level one. Level three sits correctly to the right of level two though.

Here is the code:

/*** ESSENTIAL STYLES ***/
.sf-vertical, .sf-vertical * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-vertical {
line-height: 1.0;
}
.sf-vertical ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.sf-vertical li:hover , .sf-vertical li.sfHover, .sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active{
width: 100%;
}
.sf-vertical li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-vertical li {
position: relative;
}
.sf-vertical a {
display: block;
position: relative;
}
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-vertical li:hover li ul,
ul.sf-vertical li.sfHover li ul {
top: -999em;
}
ul.sf-vertical li li:hover ul,
ul.sf-vertical li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
ul.sf-vertical li li:hover li ul,
ul.sf-vertical li li.sfHover li ul {
top: -999em;
}
ul.sf-vertical li li li:hover ul,
ul.sf-vertical li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}

/*** DEMO SKIN ***/
.sf-vertical {
float: left;
margin-bottom: 1em;
}
.sf-vertical a {
border-left: 1px solid #fff;
border-top: 1px solid #CFDEFF;
padding: .75em 1em;
text-decoration:none;
}
.sf-vertical a, a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #13a;
}
.sf-vertical li {
background: #BDD2FF;
}
.sf-vertical li li {
background: #AABDE6;
}
.sf-vertical li li li {
background: #9AAEDB;
}
.sf-vertical li:hover, .sf-vertical li.sfHover,
.sf-vertical a:focus, .sf-vertical a:hover, .sf-vertical a:active {
background: #CFDEFF;
outline: 0;
}

/*** arrows **/
.sf-vertical a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position:relative;
display: block;
right: .75em;
top: 1.05em; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: -10px 0; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-vertical ul .sf-sub-indicator { background-position: -10px 0; }
.sf-vertical ul a > .sf-sub-indicator { background-position: 0 0; }
/* apply hovers to modern browsers */
.sf-vertical ul a:focus > .sf-sub-indicator,
.sf-vertical ul a:hover > .sf-sub-indicator,
.sf-vertical ul a:active > .sf-sub-indicator,
.sf-vertical ul li:hover > a > .sf-sub-indicator,
.sf-vertical ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul.sf-shadow-off {
background: transparent;
}

Any help or suggestions would be really appreciated. Let me know if you need any additional information.