I am trying to get a transparent background for my side menu. I have tried inserting the code below in the css style box in the module I set up for ARI ext menu:

#nav .ux-menu LI A.ux-menu-link-level-0
{
background: transparent none;
border-style: none;
}

#nav .ux-menu-sub LI A
{
border-style: none !important;
}

Unfortunately for me this did not work - no change at all! I would post the link, although I am on local host.

Any ideas?

Hello,

We can help if you provide a link to a page where we can see menu and an image where we can see what do you want to achieve.

Regards,
ARI Soft

I would like to pick up to thread.
I have got the same problem. Background of my menu is yellow right now. How to change it on transparent and remove white button borders?

Homepage: zyjwellness.pl

Sorry, but provided page doesn't contain "ARI Ext Menu".

Regards,
ARI Soft

I'm on a localhost. Some how i worked it out? Here is my 'very messy' code which gets me a transparent menu BUT causes another issue of condensed rendering while loading (...that's for another forum post):

/*
* Ext Core Library Examples 3.0
* extjs.com/
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* The MIT License
*
*/

.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;}
*/

It can be a problem with site template or 3rd party extension styles. We need to see the problem so we can investigate it.

Regards,
ARI Soft