CSS - Drop Line Menu Hover Problem In Firefox

My drop menu works fine in IE7, however in firefox the menu's don't drop. Anyhelp would be appreciated. Here is my css code.

Code:

#menu {
width: 769px;
height: 27px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background: #000000 url(images/SDCB-menu-bar.gif);
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 125px;
float: left;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
text-align: center;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #fff;
background: #000000 url(images/SDCB-menu-bar.gif);
text-transform: uppercase;
}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Here is the HTML.

Code:

<div id="menu">

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="HOME"><h2>HOME</h2></a></li>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="ABOUT US"><h2>ABOUT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Board of Directors">Board of Directors</a></li>
      <li><a href="http://mysite/index.html" title="Ex-Officio Members & Staff">Ex-Officio Members & Staff</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="NEWS/EVENTS"><h2>NEWS/EVENTS</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Calendar">Calendar</a></li>
	  <li><a href="http://mysite/index.html" title="Newsletter">Newsletter</a></li>
	  <li><a href="http://mysite/index.html" title="Photo Gallery">Photo Gallery</a></li>
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="RENEWAL PROJECT"><h2>RENEWAL PROJECT</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="History">History</a></li>
      <li><a href="http://mysite/index.html" title="Executive Summary">Executive Summary</a></li>
      <li><a href="mysite/index.html" title="Plan & Dependencies">Plan & Dependencies</a></li>
		  <ul>
      <li><a href="http://mysite/index.html" title="Renewal Plan">Renewal Plan</a></li>
      <li><a href="http://mysite/index.html" title="Appendices">Appendices</a></li>
    </ul>
      <li><a href="http://mysite/index.html" title="garden">Community Learning Center & Garden</a></li>
      <li><a href="http://mysite/index.html" title="Get Involved">Get Involved</a></li>  
    </ul>
</ul>

<ul>
  <li style="left: 50%;"><a href="http://mysite/index.html" title="CONTACT US"><h2>CONTACT US</h2></a></li>
    <ul>
      <li><a href="http://mysite/index.html" title="Your Thoughts">Your Thoughts</a></li>
      <li><a href="http://mysite/index.html" title="Donate Now">Donate Now</a></li>
    </ul>
</ul>
</div>

Thank you 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.

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...

I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted.

The double row drop down menu bar looks like this:
[menu1][menu2][menu3]
[menu4][menu5][menu6]
............................[menu6a]
............................[menu6b]

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!

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?

Hello everyone, I need help with my drop down menu. There is a problem with CSS I think because it conflict with each other. I download both template and drop down menu script from somewhere else.

This is the original html template
http://www.styleshout.com/templates...ce11/index.html

This is my website with drop down menu added but it's not working
http://ghazifly.110mb.com/marketplace11/

I guess the template CSS might clash with the dropdownmenu CSS.

My index.html navigation code, I think theres nothing wrong with this code.
Code:

	<!-- navigation starts-->	
	<div  id="nav">
		<ul><ul id="jsddm">
			<li><a href="index.html">Home</a></li>
            
                         <li><a href="#">Drop Down Menu</a>
		<ul>
			     <li><a href="#">Other page</a></li>
			     <li><a href="#">jQuery Plugin</a></li>
			     <li><a href="#">Ajax Navigation</a></li>
		</ul>
	       </li>
            
			<li><a href="index.html">Archives</a></li>			
			<li><a href="index.html">About</a></li>
            			

</ul> 		
		</ul>
	<!-- navigation ends-->	

My website CSS top navigation code:
PHP Code:
/* Navigation */
#nav {
    clear: both;    
    padding: 0;            
}
#nav ul {
    float: left;
    list-style: none;
    background: #E4E4E4 url(nav.jpg) repeat-x;    
    
    padding: 0;    margin: 0 0 0 30px;
    height: 45px;
    display: inline;
    text-transform: uppercase;
}
#nav ul li {
    display: inline;
    margin: 0; padding: 0;
}
#nav ul li a {
    display: block;

    width: auto;
    margin: 0;
    padding: 0 15px;    
    border-right: 1px solid #dadada;
    border-left: 1px solid #fafafa;    
    border-bottom: none;
    color: #555;
    font: bold 14px/45px "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
    text-transform: uppercase;
    text-decoration: none;    
    letter-spacing: 1px;
}
#nav ul li a:hover, 
#nav ul li a:active {
    color: #326ea1;
}
#nav ul li#current a {    
    background: #DBDBDB url(nav-current.jpg) repeat-x;        
} 





My dropdownmenu CSS code:
PHP Code:
/* menu styles */
#jsddm
{    margin: 0;
    padding: 0}

    #jsddm li
    {    float: left;
        list-style: none;
        font: 12px Tahoma, Arial}

    #jsddm li a
    {    display: block;
        background: #324143;
        padding: 5px 12px;
        text-decoration: none;
        border-right: 1px solid white;
        width: 70px;
        color: #EAFFED;
        white-space: nowrap}

    #jsddm li a:hover
    {    background: #24313C}
        
        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border-top: 1px solid white}
        
            #jsddm li ul li
            {    float: none;
                display: inline}
            
            #jsddm li ul li a
            {    width: auto;
                background: #A9C251;
                color: #24313C}
            
            #jsddm li ul li a:hover
            {    background: #8EA344} 





Please help me with CSS. I spend like 10 hours experimenting with CSS but still not working,

So as you can see I only pasted the right code so it should be working but somehow both CSS interfere with each other and messed up my top navigation design. Also the dropdownmenu is showing horizontally. Any help is appreciated.

Thanks in advance

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.

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.

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?

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.