Hi there,

I am having a small issue with a vertical drop down menu using ARI ext Menu.

The issue I am seeing is that every time the page loads the drop down menu is displayed over/under the root menu items of the same menu. After the site has loaded, the menu renders fine (corrects itself)! It’s only while the page is loading that the menu looks bad. I have possibly caused this error myself as I needed to modify the look of the menu (clear background, and other items) and I am not good at all with CSS code.

Please see the CSS code I am using below:

.ux-menu-init-hidden{visibility:overflow;position:absolute;}
.ux-menu-container{position:relative;}
.ux-menu,.ux-menu ul{list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;line-height:1;}
.ux-menu li{position:relative;float:left;}
.ux-menu ul{position:absolute;top:0;left:0;}
.ext-border-box .ux-menu-ie-iframe,.ext-ie7 .ux-menu-ie-iframe{padding:0;margin:0;position:absolute;top:0;left:0;display:none;z-index:-1;}
.ux-menu-vertical .ux-menu-item-main{clear:left;}


/*.ux-menu a{display:block;position:relative;text-decoration:none;color:#432;border-left:0px solid #e3dad1;border-top:0px solid #e3dad1;border-bottom:0px solid #2B2B2B;font-size:12px;line-height:12px;padding:10px 14px;}*/

.ux-menu a{display:block;position:relative;text-decoration:none;font-size:12px;line-height:12px;padding:10px 14px;}

.ux-menu a.ux-menu-link-last{border-right:0px solid #e3dad1;}
ux.menu ul a{width:100%;}

/*.ux-menu a:focus,.ux-menu a:hover,.ux-menu a.ux-menu-link-hover{border-style:none;background-opacity:.2;border-radius: 5px; border-color: #D2E3F4;}*/


.ux-menu-clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.ux-menu a.ux-menu-link-parent{padding-right:24px;min-width:1px;}
.ux-menu ul a,.ux-menu.ux-menu-vertical a{border-bottom:0;border-right:0px solid #2B2B2B;}
.ux-menu ul a.ux-menu-link-last,.ux-menu.ux-menu-vertical a.ux-menu-link-last{border-bottom:0px solid #e3dad1;}
.ux-menu-arrow{display:block;width:8px;height:6px;right:10px;top:14px;position:absolute;background:url(images/menu-arrow-down.png) no-repeat;font-size:0;}
.ux-menu.ux-menu-vertical .ux-menu-arrow,.ux-menu ul .ux-menu-arrow{width:6px;height:8px;top:13px;background:url(images/menu-arrow-right.png) no-repeat;}
.ext-border-box .ux-menu-arrow{top:17px;}
.ext-border-box .ux-menu.ux-menu-vertical .ux-menu-arrow,.ext-border-box .ux-menu ul .ux-menu-arrow{top:16px;}
.ux-menu ul.ux-menu-hidden{display:none;}
.ux-menu a.current{background-image:url('images/menu-item-bg-current.png');border-color:#cbc0b7;}


/*.ux-menu a:focus, .ux-menu a:hover, .ux-menu a.ux-menu-link-hover {border-style:none; border-radius: 5px; border-color: #D2E3F4; outline: 0 none;text-decoration:none;color:#fffff;}
*/

Hello,

Where we can see the problem?

Regards,
ARI Soft

domain removed.com.au

This problem with your custom modification of the extension. Return the next CSS rule:



to original state:



Regards,
ARI Soft

Thanks for the prompt reply. Looks like it worked!

Cheers
Karma