Utiliza un menu con superfish... (deseo remover por completo ese menu y leído el codex, pero honestamente logro comprender muy poco)
Deseo utilizar este menu en ese tema. He avanzado mucho pero no lo suficiente. los menu aparecen uno al lado del otro y no como el ejemplo del css.
Así deseo que luzca el menu
Código HTML:
<html> <head> </head> <style> <style type="text/css"> } .nav { top: 300px; left: 200px; } /* estilo de menu general */ .nav { position: relative; margin: 0; padding: 0; line-height: 22px; } /* Contenedor principal de los links de navegacion*/ .nav>li { display: block; float: left; /* Displaying them on the same line */ margin: 0; padding: 0; } /* Principal link de navegacion */ .nav>li>a { /* Layout */ display: block; position: relative; padding: 10px 20px; /* Text */ font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif; color: #fff; font-size: 22px; text-decoration: none; /* Background */ background: black; /* Para viejos navegadores*/ background: rgba(0, 0, 0, .6); /* fondo transparente */ /* El color cambia en el hover con la transición */ -webkit-transition: color .3s ease-in; -moz-transition: color .3s ease-in; -o-transition: color .3s ease-in; -ms-transition: color .3s ease-in; } /* Cambiando el color en el hover */ .nav>li>a:hover, .nav>li:hover>a { color: #0fd0f9; } /* Los enlaces que contienen menús desplegables son más anchas, porque tienen una pequeña flecha*/ .nav>.dropdown>a { padding: 10px 30px 10px 20px; } /* La flecha que indica la lista desplegable */ .dropdown>a::after { content: ""; position: absolute; top: 17px; right: 10px; width: 7px; height: 7px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); border-bottom: 1px solid #fff; border-right: 1px solid #fff; } /* Cambiando el color de la flecha del menu estacionario*/ .dropdown>a:hover::after, .dropdown:hover>a::after { border-color: #0fd0f9; } /* Submenus */ .nav ul { position: absolute; margin: 0; padding: 0; list-style: none; display: block; } /* Configuración de diseño generales para los contenedores de enlace de los submenús*/ .nav ul li { position: absolute; top: -9999px; /* ocultándolos*/ height: 0px; display: block; margin: 0; padding: 0; /* Haciendo que les permite ampliar su altura con una transición, por un efecto de diapositivas*/ -webkit-transition: height .2s ease-in; -moz-transition: height .2s ease-in; -o-transition: height .2s ease-in; -ms-transition: height .2s ease-in; } /* Muestra los vínculos de submenú, mediante la expansión de sus contenedores (con una transición, definido previamente) y volviendo a colocar los*/ .dropdown:hover>ul>li { height: 30px; position: relative; top: auto; } /* links del submenu*/ .nav ul li a { /* Layout */ padding: 4px 20px; width: 120px; display: block; position: relative; /* Text */ font-family: "Open Sans Condensed", Arial, Helvetica, sans-serif; color: #bbb; text-decoration: none; font-size: 16px; /* Background & effects */ background: black; background: rgba(0, 0, 0, .6); -webkit-transition: color .3s ease-in, background .3s ease-in; -moz-transition: color .3s ease-in, background .3s ease-in; -o-transition: color .3s ease-in, background .3s ease-in; -ms-transition: color .3s ease-in, background .3s ease-in; } /* Cambiar el color y fondo del enlace en vuelo estacionario */ .nav ul li:hover>a, .nav ul li a:hover { color: #0fd0f9; background: rgba(0, 0, 0, .75); } /* Hacer los submenús de nivel 2 (o superior) que aparezca en la parte derecha de su origen*/ .nav ul .dropdown:hover ul { left: 160px; top: 0px; } /* Los enlaces de submenú tienen una flecha diferente que indica otro submenú desplegable*/ .nav ul .dropdown a::after { width: 6px; height: 6px; border-bottom: 0; border-right: 1px solid #fff; border-top: 1px solid #fff; top: 12px; } /* Cambiando el color del hover de la flecha */ .nav ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after { border-right: 1px solid #0fd0f9; border-top: 1px solid #0fd0f9; } </style> <body> <ul class="nav"> <li><a href="#">Inicio</a></li> <li class="dropdown"> <a href="#">Trabajo</a> <ul> <li><a href="#">hola</a></li> <li><a href="#">a veces</a></li> <li><a href="#">Ejemplo</a></li> <li><a href="#">Tal vez</a></li> <li class="dropdown"> <a href="#">no lo se</a> <ul> <li><a href="#">nivel 2</a></li> <li><a href="#">nivel 2</a></li> <li><a href="#">nivel 2</a></li> <li><a href="#">nivel 2</a></li> <li class="dropdown"> <a href="#">nivel 2</a> <ul> <li><a href="#">nivel 3</a></li> <li class="dropdown"> <a href="#">nivel 3</a> <ul> <li><a href="#">nivel 4</a></li> <li><a href="#">nivel 4</a></li> <li><a href="#">nivel 4</a></li> </ul> </li> <li><a href="#">nivel 3</a></li> <li><a href="#">nivel 3</a></li> <li><a href="#">nivel 3</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">blah blah</a></li> <li><a href="#">prueba</a></li> <li><a href="#">jeje</a></li> </ul> </body> </html>
Pero luce así, eso sin contar que el submenu no aparece debajo del menu. sino que siempre sale float:left; por la parte del logotipo ( por ejeplo, el menu de Doctrina mira por donde aparece)
No se donde realmente exponer el tema, ya que se basa en css junto con Php, no se si lo publique en el area que era, porque es como si tomara el css porque hace las animaciones pero, no sale ordenado como el ejemplo original. y relmente me he metido tanto con el css que creo que es un asunto del php, y con esa programacion del superfish menu y otros css. :/ creo que el superfish esta programado con el wpnavmenu del wordpress y es algo complicado, si alguien pudiera decirme como enlazar el menu ejemplo al tema Fizz de wordpress, por favor. Gracias, que me den una guia de como hacer eso porque cuando usan el superfish no es igual que un menu convencional, de solo un css y html. porque viene configurado con php.
