Joomla Templates Club 406,261 posts

[imported_skyshing Friend imported_skyshingJoin date: November 2008Posts: 15Downloads:0Uploads:0 Thanked: 1 times in 1 posts]

#135653

I could not find any answer from the forum, even though I search from page to page. At backend in the template manager the menu styling is set to ‘CSS’ (there are 4 options, ‘Split’, ‘CSS’, ‘Trans’ and ‘Moo’).
Why it is that when you hover the mouse over the main link (from top main navigation) with drop-down menu, the sub-menu stick out so much from the right-hand side? Look at the attached screenshot and you will understand what I mean

I realized that how much is sticking out depends on the length of the main link ‘label’ or ‘link name’. If you set the menu styling to ‘Moo’, it is even worse as you will see some drop-down menu is either wider or shorter.

As mentioned, the menu styling is set to ‘CSS’ in my site, please forward any suggestions to solve this issue. I know that there are few threads which have already been opened but no reply and I am sure that if this issue is solved from this new thread, it will help many others.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280149

I don’t have this installed anywhere so it’s hard to give an exact answer.

It does not depend on the length of the text. If the text is ling it will wrap.

You need to edit /templates/ja_mageia/ja_cssmenu/ja-sosdmenu.css on these lines…

#ja-cssmenu li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
width: 15.9em;
}

#ja-cssmenu li ul ul {
margin: -1.25em 0 0 12em; /* third-and-above-level lists */
}

#ja-cssmenu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#ja-cssmenu ul a {
width: 14.8em;
width: 10.8em;
}

[larskr Friend larskrJoin date: October 2006Posts: 8Downloads:21Uploads:0 Thanked: 1 times in 1 posts]

#280152

Thanks for that scotty. I understand that all drop-down menu is equal in width and when I changed the CSS codes you gave me, BUT the problem is that the width of the drop-down menu do not adjust to the length of the ‘link’ name. The links name could be different in width such as ‘Home’, ‘About Us’ etc. Any other suggestions here?

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280167

the last bit, #ja-cssmenu ul a, is the width of the link.

[Author]

Posts