Hello everyone, my objective is to expand the child menu towards the left side instead of the default right side placement. Below is the CSS code for achieving this,

    /*<![CDATA[*/

/* page styling, unimportant for the menu. only makes the page looks nicer */

/* - - - ADxMenu: BASIC styles - - - */

/* remove all list stylings */
.menu, .menu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
}

/* move all list items into one row, by floating them */
.menu li {
    margin: 0;
    padding: 0;
    border: 1px solid #000000;
    display: block;
    float: left;                /* modified by poornima. (default float :right ) */
    position:relative;
    z-index:5;
}

/* define new starting point for the nested UL, thus making positioning it a piece of cake */
.menu li:hover {
    position: relative;
}

/* align the submenus with the right edge */
.menu li ul {
    right: 0;
    margin-left:-385px;       /* already setted value: -363px;*/    /* IE 7 & 8 Problem to bring the submenu for left side */
}

/* force the submenu items into separate rows, while still keeping float:left (which resolves IE6 white-gap problem) */
.menu li li {
    width: 100%;
}

/* fix the position for 2nd level submenus.
    first make sure no horizontal scrollbars are visible on initial page load by sliding them all into top-left corner  */
.menu li li ul {
    top: 0;
}

/* ...and then place the submenu where it should be when shown */
.menu li li:hover ul {
    right: 100%;
    padding-right:52px; /*Newly added property for submenu hover properly*/
}

/* initialy hide all sub menus */
.menu ul {
    visibility: hidden;
    position: absolute;
    z-index: 10;
}

/* display them on hover */
.menu li:hover>ul {
    visibility: visible;
}

/* -- float.clear -- force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
/* IE7 float clear: */
.menu, .menu ul {
    min-height: 0;
}
/* -- float.clear.END --  */

/* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
    YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
    if you do it, make sure you 110% know what you do */
.menu ul {
    background-image: url(empty.gif);/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
    padding: 10px 30px 30px 30px;
    margin: -10px -30px 0 0;
    /*background: #f00;*/       /* uncomment this if you want to see the "safe" area. you can also use to adjust the safe area to your requirement */
}


/* - - - ADxMenu: DESIGN styles - - - */

.menu, .menu ul li {
    color: #fff;

    background:transparent url(../../Images/Modern/bgnd_sel_2.jpg) repeat scroll 0 0;}

.menu li li {
    text-align: right;
}

.menu ul {
    width: 15em;
}

.menu li:hover>a {
    color: #000;
}

.menu a {
    text-decoration: none;
    color: #000000;
    padding: .2em .3em;/*padding: .2em .4em;*/
    display: block;
    position:relative;
}

li.inactive {
    text-decoration: none;
    color: #fff;
    padding: .3em 1em;
    display: block;
    position: relative;
    background-color: #000000;
}

li.inactive {color:#cccccc;}

.menu a:hover, .menu li:hover>a {
    color: #000;
    background:transparent url(../../Images/Modern/bgnd_sel_4.png) repeat scroll 0 0;
}

.menu li li {   /* create borders around each item */
    border: 1px solid #BBBBBB !Important;
    margin-left:22px;      /*Move menu to right side*/
    text-align:right;      /*Move menu to right side and the text align right*/
}

.menu ul>li + li {  /* and remove the top border on all but first item in the list */
    border-top: 0;
}

.menu li li:hover>ul {  /* inset 2nd+ submenus, to show off overlapping */
    top: 5px;
    right: 100%;
    visibility:visible; /* IE 7 & 8 Problem add visibility for 2nd+ submenus */
}

/* Fix for IE5/Mac \*//*/
.menu a {
    float: left;
}
.menu {
    display: inline-block;
}
/* End Fix */

/*]]>*/
</style>

<!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
/*<![CDATA[*/

/* - - - ADxMenu: BASIC styles - - - */
.menu, .menu ul {
    height: 1%;
}

/* this style must be exact copy of: ".menu li li:hover ul" style above  */
.menu li li.adxmhover ul {
    right: 100%;
}

/* the following two rules simulate li:hover>ul selector
    repeat enough times to cover all nested levels
    look at www.aplus.co.yu/adxmenu/trouble/ if some of your submenus do now show up */
.adxmhover ul,
.adxmhover .adxmhover ul {
    visibility: visible;
}
.adxmhover li ul, 
.adxmhover .adxmhover li ul {
    visibility: hidden;
}

/* - - - ADxMenu: DESIGN styles - - - */
.menu ul a {    /* fix clickability-area problem */
    zoom: 1;
}

.menu li li {   /* fix white gap problem */
    float: left;
    width: 100%;
}

.menu li li {   /* prevent double-line between items */
    margin-top: -1px;
}

.menu a:hover, .menu .adxmhoverA {      /* li:hover>a selector */
    color: #000;
    background:transparent url(../../Images/Modern/bgnd_sel_4.png) repeat scroll 0 0;
}

.adxmhover a, .adxmhover .adxmhover a {
    color: #000;
}
.adxmhover li a, .adxmhover .adxmhover li a {
    color: #000;
}

.menu .adxmhoverUL .adxmhoverUL {   /* inset 2nd+ submenus, to show off overlapping */
    top: 5px;
    left: 100%;
}

/*]]>*/
/*</style>*/

<script type="text/javascript" src="../code/ADxMenu.v4.02.js"></script>
<![endif]-->

The screenshot of the page looks as follows

When hovering over the "user management" menu, the "create user" submenu should expand towards the left side. Any assistance on achieving this would be greatly appreciated.

Thank you