Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.

Recent Events
  • 18/11/2017 Black Friday is coming

    Don't wait BLACK FRIDAY, use FRIDAY17 coupon code to get 35% discount for all our extensions right now.

  • 05/09/2017 BIG Autumn SALE

    Use AUTUMN17 coupon code to buy our WordPress or Joomla! extensions with 25% discount. Hurry up! The offer is valid till 11 September.

2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut

Follow us on twitter

Welcome, Guest
Please Login or Register.    Lost Password?

Modify Submenu
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: Modify Submenu
Modify Submenu 7 Years, 8 Months ago Karma: 0

I'm changing the CSS for items of main menu, but i can't modify the submenu items. I want to modify, background, font-size, font-color and more... but I can't find his class.

The image show the problem.

I tried with:

.ux-menu .ux-menu-sub li li a {font-size:12px !important;}

Last Edit: 2010/05/29 17:43 By carscx.
The administrator has disabled public write access.
Re:Modify Submenu 7 Years, 8 Months ago Karma: 676

You can use the following CSS rule for changing sub menu font color, background and others:


.ux-menu-container .ux-menu-sub LI A
  color: red;
  background: green none;

Font size and weight you can define in module settings for all items (main menu items and sub menus items).

ARI Soft
The administrator has disabled public write access.
Re:Modify Submenu 7 Years, 8 Months ago Karma: 0
Thank you very much, I've solved differently.

I changed the file <joomla_dir>/modules/mod_ariextmenu/mod_ariextmenu/templates/main.html.php about line #53


printf('<style type="text/css">#%1$s A{ /*font-size: %2$s !important; font-weight: %3$s !important; text-transform: %4$s !important; */}</style>',

by this


And the line about #64


sprintf('<style type="text/css">#%1$s A{ /*font-size: %2$s !important; font-weight: %3$s !important; text-transform: %4$s !important; */}</style>',

by this


I canceled the options of backend, to manage it with only CSS. And I have succeeded, thanks to this code:


.ux-menu-sub li a {background:#eee;color:#505050;font-size:14px !important;font-weight:bold !important;text-align:left !important;border-top:0 !important;border-bottom:0 !important;border-right:1px solid #C5C5C5 !important;border-left:1px solid #C5C5C5 !important;padding:7px !important;}
.ux-menu-sub li a:hover {background:#fff;color:#505050;font-size:14px !important;font-weight:bold !important;}
.ux-menu-sub .ux-menu-link-last a {border-bottom:1px solid #C5C5C5 !important;}
.ux-menu li li{width:200px;height:auto;margin:0px;padding:0px;}

You can see the final result on the image below:

Thank you very much.

Last Edit: 2010/05/30 05:07 By carscx.Reason: Modify size of example image
The administrator has disabled public write access.
Go to topPage: 1