Problem with jQuery Multi Level CSS Menu #2

[nicolasp]

Hi,

I'm new to this forum and have been using dynamicdrive for a long time now and this is my first problem.

i've tried to set that jQuery Multi Level CSS Menu #2 on one of my websites and it doesn't work properly on Firefox3 but however it displays just great on IE7

do you have any suggestion at what may be the problem ?
the adress of the website is http://endoscopie.awardspace.com/php_engine/main.php?menu=accueil&submenu=accueil&page=bienvenue

The website is in french as you can see.

The problem i'm having is that the menu is starting only half a way from the full width of the div when i look at it from firefox

The original code is from there http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

Thanks in advance

nicolasp

[webskipper]

I can get this work on the desktop no matter how I set up the directories but, as soon as it is uploaded it just displays the Header. No drop downs.

This will not work online even if all are sitting in the main directory or I hotlink them all with full paths.

What's wrong?

[ddadmin]

webskipper: Please post a link to the page on your site that contains the problematic script so we can check it out.

[nicolasp]

here is my css for the div of the menu:
the javascript is the same than the one that can be downloaded and the menu is displayed with a php include



.submenudiv {
position:relative;
margin-top:0px;
margin-left:auto;
margin-right:auto;
width:75%;
}


and the css for the menu itself


.jqueryslidemenu{
font: bold 12px Verdana;
background: #d4340c;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #d4340c; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #b82d0b;
color: #d4340c;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: #b82d0b; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid #b82d0b;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #b82d0b;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

[webskipper]

webskipper: Please post a link to the page on your site that contains the problematic script so we can check it out.

I figured it out. Lightbox was interfering with the dropdown effect somehow. I will have to resort to using one of the image effects on DD so that I can use this.

Thanks for the coding as it was easy to convert my vertical list menu into the horizontal menu.

[webskipper]

Half way down the page? Reload. Or indented too far?

[webskipper]

This is mine and is based on width= 100%. Divide your categories from 100%.

.menu
{
font: bold 11px arial,helvetica,sans-serif;
width: 100%;
background-color: #000;
text-transform: uppercase;
}

.menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}

/*Top level list items*/
.menu ul li
{
position: relative;
display: inline;
float: left;
width: 16.6%;
text-align: justify;
}

[nicolasp]

when i said half way, i meant half of the width of the screen

[nicolasp]

i just fixed it. if anyone has the same problem, here is the solution.
i just added
float:left; to the following css classes

.jqueryslidemenu{

float:left
}

.jqueryslidemenu ul{
float:left
}

/*Top level list items*/
.jqueryslidemenu ul li{
margin-left:0px;
float: left;

}

[NightCrawler]

Searched and found this thread so rather than starting over, please consider my inquiry for new review.

This question is regarding this menu:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P100/

I have the menu configured and it looks great. I just need to now customize it.

I am interested in setting a background image for repeat for this menu. Kind of like this menu:

http://www.dynamicdrive.com/style/csslibrary/item/css_indent_menu/

but without the indent and two images. I just need one static image for the background. I have already completed my image and need to apply it.

I also want to change the opacity or html color of the drop down menus and their text color as well.

I also want to chage the height of the menu and the font and size.

TIA,

NC

[webskipper]

I use CSS layouts. 5 DIVs (top, footer, sides, and main).

When I use JQuery Multi Level CSS Menu #2 inside the top DIV, the menu will not drop beyond the top DIV yet if I include it in the main container then I cannot get it to stick to the top DIV.

Is it possible to get the drop down to overflow into the next div?

I am currently testing out the CSS Left, Top, Bottom and Right Frames Layout. Is CSS Frames Ok for SEO?

modelyacht.org / xxx / CSS_Frames4.html

[e11world]

Hey everyone,
I hope I can get an answer for this.. I'm using this menu and it looks great. I have one little problem. I assign a class to each of the top level li's to get the selected state working, but it passes that on to the li's inside it (if it had a sub level menu nested inside it)?

This is the css code for the selected state:

.jqueryslidemenu li:hover, .jqueryslidemenu li.sfhover,
body.index .jqueryslidemenu li.index a,
body.company .jqueryslidemenu li.company a,
body.products .jqueryslidemenu li.products a,
body.services .jqueryslidemenu li.services a,
body.support .jqueryslidemenu li.support a,
body.demos .jqueryslidemenu li.demos a,
body.contact .jqueryslidemenu li.contact a {
background: #2657ba;
color: #eeefea;
}

And I'd have to just add this to the body tag of each page <body class="classNameOfTopLevel"> to get it to work.

Any idea's what I need to add/change in my CSS.. I can't seem to figure this out. Thanks in advnace!

[webskipper]

I am using the 2 column liquid fixed layout and the jQuery ML CSS Menu #2.

Viewing the pages in IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage) as i work on them on the Mac.

In all Mac browsers I get the right arrow sitting on the left of any drop downs and the slide out does not work. IE6&7 no arrows.

I am using the same menu successfully in the main body of the same site on another page.

Page in question is modelyacht.org/xxx/XNEW.html

How do I fix that? Did not mess with the JS's.

IE6 and 7 are whacked. I won't work on those till it looks and fuction correctly in Mac Safari and FF.

How do I get the top level UL to run across the whole page? I have 11 cells so I choose 9.1%.

Thanks for any help in advance.

.topmenu
{
font: bold 11px Arial,Times,Monoco,Helvetica;
width: 100%;
background-image: url(/css/image/sbg.gif);
background-color: #003;
background-repeat: repeat;
text-transform: uppercase;
white-space: nowrap;
}

.topmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}

/*Top level list items*/
.topmenu ul li
{
position: relative;
display: inline;
float: left;
width: 9%;
text-align: justify;
}

/*Top level menu link items style*/
.topmenu ul li a
{
display: block;
/*background of tabs (default state)*/
padding: 4px 5px;
border-right: 1px #000 solid;
color: #000;
text-decoration: none;
background-color: #003;
background-image: url(/css/image/buttonup.gif);
border-left: 1px #000 solid;
border-top: 1px #C00 solid;
}

* html .topmenu ul li a
{
/*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
text-align: left;
}

.topmenu ul li a:link, .topmenu ul li a:visited
{
color: #000;
background-color: #FAFAFA;
background-image: url(/css/image/buttonup.gif);
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
}

.topmenu ul li a:hover
{
background: 000;
/*tab link background during hover state*/
background-color: #FAFAFA;
background-image: url(/css/image/buttondown.gif);
border-top: 1px #C00 solid;
border-right: 1px #CCC solid;
border-left: 1px #CCC solid;
}

/*1st sub level menu*/
.topmenu ul li ul
{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.topmenu ul li ul li
{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.topmenu ul li ul li ul { top: 0; }

/* Sub level menu links style */
.topmenu ul li ul li a
{
font: normal 12px Arial,Times,Monoco,Helvetica;
width: 140px;
/*width of sub menus*/
padding: 5px;
margin: 0;
border-top: 1px #C00 solid;
}

.topmenuz ul li ul li a:hover
{
/*sub menus hover style*/
background: #eff9ff;
color: 000;
}

.downarrowclass
{
position: absolute;
top: 8px;
right: 2px;
bottom: 2px;
}

.rightarrowclass
{
position: absolute;
top: 6px;
right: 2px;
bottom: 2px;
}

[webskipper]

I use CSS layouts. 5 DIVs (top, footer, sides, and main).

When I use JQuery Multi Level CSS Menu #2 inside the top DIV, the menu will not drop beyond the top DIV yet if I include it in the main container then I cannot get it to stick to the top DIV.
l

.jqueryslidemenu
{
overflow: visible;
}

[webskipper]

How do I choose the width of the individual Top level UL's?

[webskipper]

Fixed it.

I have 11 drop downs:

Now I need some help to prevent the Arrow image from hovering over the UL Li's when the window is smaller.

.jqueryslidemenua
{
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenub {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenuc {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenud {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenue {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenuf {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenug {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenuh {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenui {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenuj {
width: 9.1%;
white-space: nowrap;
}
.jqueryslidemenuk
{
width: 9.1%;
white-space: nowrap;

[chuzzy]

Hi everyone,

I have this implemented and it works well in everything EXCEPT ie6... it works in ie6 if there is no content underneath the drop downs, but if you have content the menus kind of freak out and you can't really click on any items easily.

does anyone else have this issue? I tried messing around with stuff but it doesn't seem to fix it.

[chuzzy]

ok I asked too soon, I just fixed this problem by adding "zoom:1;" to .jqueryslidemenu ul li and that fixed it!

[webskipper]

IE6 gives me headaches. In IE6 the menu is broken, The UL Li has spaces.

What is your URL that sows it works in IE6?

[webskipper]

.menu ul li a
{

background-image: url(/background.gif);
background-color: #CCC;
}