I updated from 3.1 to 3.7 and now my 3rd level drop down menu items display overlapped. It used to place them nicely next to the 2nd level menu. See attached.

CommentFileSizeAuthor
#10 Sky Fix.PNG6.35 KBdesign10
#3 menus.png34.22 KBaimutch
#2 Picture 1.png84.69 KBagerson
Picture 1.png26.95 KBagerson
Picture 2.png55.99 KBagerson
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

aimutch’s picture

aimutch CreditAttribution: aimutch commented

I tested this with a fresh install of 3.7 and couldn't duplicate the problem. Is this happening with any browser or a particular one?

agerson’s picture

agerson CreditAttribution: agerson commented
FileSize
Picture 1.png84.69 KB

You sure you have three full levels under Primary links?

aimutch’s picture

aimutch CreditAttribution: aimutch commented
FileSize
menus.png34.22 KB

See attached.

agerson’s picture

agerson CreditAttribution: agerson commented

Thanks for testing it aimutch. Anyone know what could cause such strangeness?

agerson’s picture

agerson CreditAttribution: agerson commented

I have traced the issue to "DHTML Menu" (http://drupal.org/project/dhtml_menu). Disabling this module fixed the issue with the sky menus. Anyone know a way to resolve this issue? The "no page refresh" behavior that DHTML menu adds to drupal menu drill down is nice.

aimutch’s picture

aimutch CreditAttribution: aimutch commented

I haven't seen this refresh issue. Can you describe what happens?

agerson’s picture

agerson CreditAttribution: agerson commented

DHTML Menu's core functionality is that it allows you to expand and collapse drupal menu tree's without refreshing a page load.

Jacine’s picture

Jacine
she/her
Location New York
CreditAttribution: Jacine commented

jQuery menu appears like a good alternative, but it needs to be styled for Sky. It doesn't mess around with all of your menus like DHTML menu does. There is an issue requesting this here: http://drupal.org/node/491810 if anyone wants to take that on. :)

Jacine’s picture

Jacine
she/her
Location New York
CreditAttribution: Jacine commented
Title: 3rd level sub menu overlap » Sky Dropdown Navigation conflicts with DHTML Menu module
Status: Active » Closed (won't fix)

I am currently unaware of a way to fix this with DHTML menu, because it's adding classes to all menus and firing Javascript on them which totally conflicts with the way Sky does it's navigation. Specifically that it prints the menu via theme_menu_tree, which DHTML menu alters.

I've run into this on client sites, and have resorted to manually plugging in the jQuery treeview plugin, but I think the jQuery menu is a good alternative.

Marking wont fix, because I don't think it can be fixed and changing the title to be more descriptive of the issue.

design10’s picture

design10 CreditAttribution: design10 commented
FileSize
Sky Fix.PNG6.35 KB

Sky is an awesome theme.

Simple and clean with customizations for those who are code challenged. This theme is easy for people to get a custom look for quickly with no code. Great job!!!

I happen to love the functionality of DHTML menu above the other menus I have tried. And to me it seems to add a feature too Sky's native menu system.

DHTML menu conflicts with a lot of themes by appending CSS classes and events to the ULs not anticipated by the themer as well it should. No one can theme for all 3000 modules in drupal.

I have a small CSS workaround but how well it works depends on where you want your menus (ie. left center right)

After line 473 and 481 in style.css add

float: right;

Thats it!!

Note: this does not play well with right floated navigation bar due to lack of edge detection in the implemetation but should well floated left or center.

tested on IE 6, 7, 8 and FF 3.5.

daviscomp20’s picture

daviscomp20 CreditAttribution: daviscomp20 commented

I too am using the SKY Theme with the DHTMLMenu Module and have tried the css fix you stated above, but my menus are still overlapping .. here is the modified CSS. Am I missing something?

#navigation ul ul {
background: #fff url('images/bg-shade-white-lrg.png') repeat-x 0 100%;
border: solid 1px #ddd;
border-top: 0;
width: 15em;
left: 0;
line-height: 1.25em;
color: #555;
display: none; /* make sure the submenus aren't visible on load */
margin: 0 0 0 -1px; /* make up for border */
padding: 0;
float: right;
position: absolute;
top: 2.75em;
z-index: 1000;
}
#navigation ul ul li {
display: block;
margin: 0;
padding: 0;
float: right;
position: relative;
width: 15em;
line-height: normal;
border-right: none;
text-align: left;
}

Thanks!