Buenas a tod@s. Ando un poquito perdido.
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.