2010-08-25 74 views
0

大家好,我的目標是讓孩子的菜單向左側擴展而不是右側。 的CSS如下所示,CSS-如何創建朝向左側的兒童菜單

/*<![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]--> 

頁面的屏幕快照如下 alt text

當我將鼠標懸停「用戶管理」菜單,在「創建用戶」必須得到擴展到左側。任何幫助將深表感謝。

感謝

+0

一個活生生的例子如果粘貼你的CSS,我們也許能夠幫助你。 – hellozimi 2010-08-25 08:12:16

+0

有些問題格式化也會有幫助.. – Kyle 2010-08-25 08:32:57

+0

Leftern?這是西方的東西嗎? – JustinStolle 2011-07-18 00:08:57

回答

2

有你的代碼中的註釋,它說

/* ...然後將它應該後顯示*/

當子菜單這你有以下

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

所以我想如果你改變padding-rightpadding-leftright:100%left:100%也許您可以更改菜單。

來幫助你的最好辦法,就是給我們jsbin.com

+0

謝謝Sotiris。有效。你拯救了我的一天。 – GethuJohn 2010-08-25 09:51:11