Support for CSS Flyout Menu

[ckosloff]

I've checked z-index on navColumnOne (z-index: 10) and centerColumn (z-index: 0)

Where are you checking z-index?
You have to look in stylesheet_categories_menu.css
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0;
/* this overrides the margin-top in the declaration above */
}
Once this is fixed I'll invoice you with the details of my bank account.

[issy]

Where are you checking z-index?
You have to look in stylesheet_categories_menu.css
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0;
/* this overrides the margin-top in the declaration above */
}
Once this is fixed I'll invoice you with the details of my bank account.

Yes, I'm looking on both style sheets ( stylesheet.css & stylesheet_categories_menu.css ) I just wanted to make sure the that nothing else was conflicting with the menu that's why I pointed out the the navColumnOne and centerColumn.

I have taken the code above without success.
Here's my stylesheet_categories_menu.css

body { behavior: url(includes/csshover.htc);} /* WinIE behavior call */
div#nav-cat {
width: 230px;
background-color: #fff;
font-weight:normal;
margin-top: 2px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 0px;
padding: 0px;
border: 0px dotted #FF0000;
}
div#nav-cat ul {
margin: 0px;
padding: 0;
width: 230px;
z-index: 500;
/* border: 1px solid #AAA;*/}

div#nav-cat ul.level2 {background-color: #e8effe;}
div#nav-cat ul.level3 {background-color: #e8effe;}
div#nav-cat ul.level4 {background-color: #e8effe;}
div#nav-cat ul.level5 {background-color: #e8effe;}
div#nav-cat ul.level6 {background-color: #e8effe;}

div#nav-cat li {
z-index: 500;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* <---this line may help or hinder IE menu shifting issues */
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCC;
height: 20px;
}
div#nav-cat li li {
margin: 0px; /* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {
background-color: #e8effe;
}
div#nav-cat li.submenu {}
div#nav-cat li.submenu:hover {background-color: #e8effe;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0em;
text-decoration: none; width: 230px; color: #000;}


/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
div#nav-cat>ul a {width: auto;color:#000000}
div#nav-cat ul ul {position: absolute; top: 0; left: 230px; display: none; z-index: 500;}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
position: absolute;
display:block;
background-color: #e8effe;
margin: 0px;
z-index: 500;
border: 0px dotted #FF0000;
padding-top: 0.25em;
padding-right: 0;
padding-bottom: 0.25em;
padding-left: 0em;
}

div#nav-cat ul.level2 {
padding: 0;
width: 150px;
border: none;
}

I can't even focus on my screen anymore, need to rest... :)

Thanks

[issy]

Yes, I'm looking on both style sheets ( stylesheet.css & stylesheet_categories_menu.css ) I just wanted to make sure the that nothing else was conflicting with the menu that's why I pointed out the the navColumnOne and centerColumn.

I have taken the code above without success.

I can't even focus on my screen anymore, need to rest... :)

Thanks

I've resolved this issue, the problem was that I had overflow: hidden; in the 2 following divs, I just removed that and it all work as it should:)

#navColumnOne {
overflow: hidden;
}

.columnLeft {
margin-right: 15px;
margin-left: 2em;
border: 0px dotted #FF0000;
overflow: hidden;
}

Thank you

[ckosloff]

I've resolved this issue, the problem was that I had overflow: hidden; in the 2 following divs...

Thanks for posting the error and the fix.