Hi,
You actually point out a very good point. Honestly, i have never thought about it. It will destroy the User-experience if you leave everything with this state.
Resolving this through the JavaScript doesn't make any sense. But it can be taken care by CSS, and it is easier than you would think of.
A simple
float:right; rule for the drop down box inner will take care it. But the problem is, that CSS rule should be applied only for the specific menu item (the last menu item in your case).
To apply the CSS rule only to specific drop down box, we should use the help of specific CLASS name for that element. Luckily, every parent menu item has a specific CLASS name (based on ItemID)
Look at the screenshot:
Attachment Pasted_Image_4_24_14__7_03_PM.png not found
By following this idea, we can easily define a CSS that will be effective only for the designated drop down element.
using
.item562 .dropdown .dropdown-bg.wrapper { float:right;}
is just one way of doing it. OR you can use
text-align:right;, like this:
.item562 .dropdown .dropdown-bg.wrapper { text-align:right;}
OR put some padding space to left side, so the child menu items will stay right below the Parent menu item. Something like:
.item562 .dropdown .dropdown-bg.wrapper { padding-left:600px;}
There are some other CSS rules that will work as well. It is up to you to go with which ever sounds more suitable to you, or which ever you are familiar
(again, don't attempt to jump into JS files, it will mess up everything. CSS is always more efficient and easier way to handle those things.)
If you like CoolMart and satisfied with the support you have received, please "write a review" on:
www.flexiblewebdesign.com/Joomla-Virtuemart-Templates/CoolMart
Rate CoolMart and write a couple of sentences to share your experience with the support team.
It won't take more than 2 minutes from you but it is extremely important for us.
Thanks in advance!
Regards,
Support