CSS- How to create child menu towards leftern side


Tags: html,css,menu,html-lists

Problem :

Hi all my goal is to get the child menu expanded towards the left hand side instead of the right hand side. The CSS is as follows,

    /*<![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 page's screen shot is follows alt text

When i mouse hover "user management" menu, the "create user" must get expanded onto the left hand side. Any help would be deeply appreciated.

Thanks



Solution :

there is a comment on your code, it says

/* ...and then place the submenu where it should be when shown */

after this you have the following

.menu li li:hover ul {
    right: 100%;
    padding-right:52px;
}

so I suppose if you change the padding-right to padding-left and right:100% to left:100% maybe you can change the menu.

The best way to help you, is to give us a live example on jsbin.com


    CSS Howto..

    How to align center without break the user experience?

    How do I turn CSS into example HTML? Is there a shortcut to understanding affects of CSS on nested HTML tags?

    How can I modify footer color dynamically when I switch to another page in html and css

    How to apply css to particular selected child in ivh-treeview?

    How to reset a css animation class using jquery?

    How can I make Non-English quotation marks with a help of CSS? [closed]

    How can I make this Asp.net button have the same CSS as this

    Floating of Divs not exact. How to arrange them the right way?

    How do I submit suggestions to the CSS spec? [closed]

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    How do I get a div to fit to the screen with no overflow in CSS

    CSS , 3 three columns, how to make the middle liquid? [closed]

    How to add code area css style to HTML

    how to change the background color of the holder of an image using jquery cycle

    How to make an invisible character in HTML, that still get's picked up on text selection?

    how to flip the div using css?

    How do I center elements on a page using percentage widths?

    How to reduce space between two words vertically in css/html

    How to create custom CSS “on the fly” based on account settings in a Django site?

    How do I use CSS to centre this content?

    How to make css styles in the document body only specific to a div

    How to display UpdateProgress at the center of a grid view with CSS?

    How to give a line break between buttons in css/html?

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    How do we add the spot bulging effect in css? [closed]

    How to control the CSS on an Active/Focused button in Foundation 5 [RESOLVED]

    how to access the class css properties from an attribute directive associated with the same element

    CSS: How to increase distance between two elements?

    How to make dynamic picture boxes with text on bottom with css?

    Django Allauth - How to add custom css class to fields?