He modificado un menú un poco complejo y lo he situado en la parte inferior y cambiado la orientación de apertura hacia arriba.
El problema radica en que no me guarda la misma proporción que cuando estaba en la parte superior: submenú no se ve completo, descuadra la apertura del resto en general ( menú solamente ).
Los datos css sería:
Código CSS:
Ver original
.sf-menu, .sf-menu li.menu-item, .sf-menu ul.sub-menu { margin: 0; padding: 0; list-style: none; background: #000; } .sf-menu { line-height: 1.0; } .sf-menu ul.sub-menu { position: absolute; top: -999em; width: 150px; /* left offset of submenus need to match (see below) */ } .sf-menu ul.sub-menu li.menu-item { width: 150px; } .sf-menu li.menu-item:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li.menu-item { float: right; position: relative; } .sf-menu a.bk-menu-item-anchor { display: block; position: relative; } .sf-menu li.menu-item:hover ul, .sf-menu li.menu-item.sfHover ul { left: 0px; top: -100px; /* 100% match top ul list item height */ z-index: 999; /* 99 */ } .bk-fixed-header-left .sf-menu > li.menu-item:hover > ul, .bk-fixed-header-left .sf-menu > li.menu-item.sfHover > ul { left: 250px; top: 1px; /* match top ul list item height */ } ul.sf-menu li.menu-item:hover li.menu-item ul.sub-menu, ul.sf-menu li.menu-item.sfHover li.menu-item ul.sub-menu { top: -999em; /* -999em; */ } ul.sf-menu li.menu-item li.menu-item:hover ul.sub-menu, ul.sf-menu li.menu-item li.menu-item.sfHover ul.sub-menu { left: 149px; /* match ul width */ top: -100px; } ul.sf-menu li.menu-item li.menu-item:hover li.menu-item ul.sub-menu, ul.sf-menu li.menu-item li.menu-item.sfHover li.menu-item ul.sub-menu { top: -999em; } ul.sf-menu li.menu-item li.menu-item li.menu-item:hover ul.sub-menu, ul.sf-menu li.menu-item li.menu-item li.menu-item.sfHover ul.sub-menu { left: 149px; /* match ul width */ top: 0px; } /*** MENU SKIN ***/ .sf-menu { width:100% ; height:90px ; position:fixed ; bottom:0 ; right:0 ; left:0 ; padding:2px 0 2px; background-color:black ; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border:1px solid #fff; /* *z-index: 200; position: relative; top: 0px; left: 0px; margin-bottom: 0px; text-transform: uppercase; */ } ul.sf-menu span.sf-sub-indicator, ul.bk-stacked-menu span.sf-sub-indicator{ height: 100%; width: 7px; display: block; position: absolute; top: 0px; right: 15px; text-indent: -9999px; background: transparent url("images/submenu-tip.png") center no-repeat; }
Agradecería cualquier aportación.
Gracias.