Ver Mensaje Individual
  #6 (permalink)  
Antiguo 24/04/2015, 04:35
mariadomingo
 
Fecha de Ingreso: abril-2015
Mensajes: 5
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Menu horizontal varios niveles

Código CSS:
Ver original
  1. /*--------------------------MEGA MENU--------------------------------*/
  2. /*---------------últimes modificaciones 24 abril 2015----------------*/
  3. button.btn.btn-navbar.tb-megamenu-button {
  4.   display: none;
  5. }
  6.  
  7. .region.region-header-menu {
  8.   background: rgb(75, 198, 216);
  9. }
  10.  
  11. #block-tb-megamenu-main-menu{
  12.    width: 100%;
  13.    margin: 110px auto 0 auto;
  14. }
  15.  
  16. /*Primer nivel*/
  17.  
  18. .level-1 {
  19.   float:left;
  20. }
  21.  
  22. .level-1 > a {
  23.   color: white;
  24.   padding: 13px 15px 10px 15px;
  25. }
  26.  
  27. .nav-collapse.collapse.always-show {
  28.     min-width:992px;
  29.     width:992px;
  30.     margin: 0 auto;
  31. }
  32.  
  33. .tb-megamenu-item.mega.dropdown{
  34.     padding:0px 15px;
  35. }
  36.  
  37. li.tb-megamenu-item.level-1.mega.dropdown:hover {
  38.   border-bottom: 5px solid white;
  39. }
  40.  
  41. /*Segundo nivel*/
  42. .tb-megamenu-nav>li:hover>div{
  43.   background:rgb(75, 198, 216);
  44.   display: inline-flex;
  45.   float: left;
  46. }
  47. .mega-dropdown-inner{
  48.   float: left;
  49.   display: inline-flex;
  50.   display:none;
  51.   position: fixed;
  52.   width: 100%;
  53.   margin: 0 auto;
  54.   margin-top: 5px;
  55. }
  56.  
  57. .tb-megamenu-item.level-2.mega a {
  58.   color: rgb(255, 255, 255);
  59. }
  60.  
  61. .level-2{
  62.   float:left;
  63.   padding: 15px 15px;
  64. }
  65.  
  66.  
  67. /*Tercer nivel*/
  68. .mega-dropdown-inner>ul>li:hover > div.mega-dropdown-inner {
  69.   display:block;
  70.   float:left;
  71. }
  72.  
  73.  
  74. .level-3 {
  75.     min-width: 200px;
  76.     margin-top: 10px;
  77.     float: left;
  78.     padding: 15px 0px;
  79.     display: block;
  80.     background: white;  
  81.   }
  82.  
  83. .level-3>.mega-dropdown-inner{
  84.   padding:10px 0;
  85.   display:block;
  86. }
  87.  
  88. .tb-megamenu-item.level-3.mega a {
  89.   color: rgb(75, 198, 216);
  90. }
  91.  
  92. /*Cuarto nivel*/
  93. .level-4 {
  94.   padding: 5px 0px;
  95.   background: white;
  96. }
  97.  
  98. /*OTROS*/
  99. .tb-megamenu-column-inner{
  100.   float:left;
  101. }
  102.  
  103. .tb-megamenu-column-inner > ul{
  104.   margin-left: 5%;
  105.   padding-right: 5%;
  106.   margin: 0 auto;
  107. }
  108.  
  109. .tb-megamenu-column-inner>ul>li>a{
  110.   color:red;
  111.   float:left;
  112. }

Última edición por pzin; 25/04/2015 a las 00:33 Razón: formato código