Joomla Templates Club 406,261 posts

[ljkeashly Friend ljkeashlyJoin date: January 2007Posts: 13Downloads:0Uploads:0]

#119013

Hello,

I am using the CSS menu and am having a problem accessing the submenus when the font is resized to a smaller size. When you use the font re-sizer and change the font to be smaller the submenu moves to the right and there is a gap between the main menu item and the submenu, so you can not move your mouse to the submenu without it disappearing. This is mainly a problem when you have the narrow layout, but it also happens in the medium layout.

What do you need to change so there is no gap when the text gets resized smaller?

Also, the top menu item’s submenu has a border problem in IE7. All of the other submenus are fine, but the first submenu has a bottom border a couple of pixels and then another bottom border instead of the double border being next to each other as all the other sub-menus are (see http://www.cottage.keashly.ca).

Any help would be greatly appreciated.

Thanks

[ljkeashly Friend ljkeashlyJoin date: January 2007Posts: 13Downloads:0Uploads:0]

#215204

I found that you need to modify this line of css

#ja-cssmenu ul a {
width: 18.8em;
width: 12.8em;
}

Change the w/idth definition smaller and the submenu background will not overflow the borders on the submenu.

To fix the problem of the gap between the main menu and submenus, making it so you can mouseover to the submenu is in this css code:

#ja-cssmenu li ul {
margin: -1.6em 0 0 10.5em;
}
.wide #ja-cssmenu li ul {
margin: -1.6em 0 0 12.5em;
}

You need to change the last value and make it smaller to move the submenu closer to the main menu.

To fix the double border on the bottom of the first submenu you need to add the following IE hack to the head of your template index.php file:

<!–>
<style type=”text/css” media=”screen”>
ul#ja-cssmenu li {
float:left;
width: 100%;
}
ul#ja-cssmenu li a {
height: 1%;
}
</style>
<!–>

Hope this is helpful to others.

[Author]

Posts