With CSS rtl customization, menu dropdown list disappears whilst attempting to select menu item

Products

• SUPPORT AUTOMATION- SERVER
• CA Service Desk Manager - Unified Self Service
• CA Service Desk Manager
• CA Service Management - Asset Portfolio Management
• CA Service Management - Service Desk Manager

Issue/Introduction

Although it is possible to customize CA Service Desk Manager, some custom code may present some challenges.  

For example, as described in this article, a customization made to menubar.css to implement right-to_left (rtl) text direction in the menubar impacted the ability to select a menu item from a dropdown menu.

A customization was made to menubar.css to implement right-to_left (rtl) text direction in the menubar as follows:

1. Copy $NX_ROOT\bopcfg\www\wwwroot\css\menubar.css to $NX_ROOT\site\mods\www\wwwroot\css
2. Edit $NX_ROOT\site\mods\www\wwwroot\css\menubar.css by changing "body,span.menu{FONT-FAMILY:verdana,arial,helvetica,sans-serif;FONT-SIZE:1.0em;} " to "body,span.menu{FONT-FAMILY:verdana,arial,helvetica,sans-serif;FONT-SIZE:1.0em;direction: rtl;} "
3. Clear the web browser cache.
4. Log into the CA Service Desk Manager web interface and Create a New Incident. In the "Create New Incident <ref_num>" form, use the mouse and click on the Activities dropdown in the menu bar at the top right of the form and then use the mouse to try to select Update Status.

With that change in place, it is no longer possible to select an item from one of the dropdown menus in the menubar.    The list of menu items in a dropdown disappears whenever the mouse cursor is moved away from the selected menubar menu over the list to select an item. 
 
Is there a suggested solution? 

Environment

CA Service Desk Manager 17.1 with a customization to menubar.css

Resolution

Code customizations are unsupported.  However, the following solution may work:

1. Copy $NX_ROOT\bopcfg\www\wwwroot\scripts\menus.js to $NX_ROOT\site\mods\www\wwwroot\scripts
2. Edit  $NX_ROOT\site\mods\www\wwwroot\scripts\menus.js
3. Remove the conditional from the last block of code in the function "MenuBar.prototype.add_toolbar_icon". That is, instead of this doe: 

if (ahdframeset == ahdtop) { 
_td = doc.createElement("TD"); 
_td.className = "menulist_unselected_background"; 
_td.width = "100%"; 
bar.appendChild(_td); 
} 

there would be this code: 
 

{ 
_td = doc.createElement("TD"); 
_td.className = "menulist_unselected_background"; 
_td.width = "100%"; 
bar.appendChild(_td); 
} 

4. You may need to implement that in other places, such as "std_head.js".  
5. Clear the web browser cache. 
6. The full effect would need to be thoroughly tested.  The code change is unsupported by CA Support.

Additional Information

Please review the Important Notes in the "Web Interface Modifications" section of the documentation with regards to the level of technical support for customizations (  https://docops.ca.com/ca-service-management/17-1/en/building/building-ca-service-desk-manager/web-interface-modifications )/