Respuesta a: ¿Es posible crear un menú o lista desplegable dentro de un tema?

Inicio Foros WordPress Themes y Diseño ¿Es posible crear un menú o lista desplegable dentro de un tema? Respuesta a: ¿Es posible crear un menú o lista desplegable dentro de un tema?

#66837

Jaivota
Participante

Bueno, finalmente he dado un paso hacia adelante, aunque aún hay un pequeño problema que espero alguien pueda solucionar.

En la página cssmaker obtuve el código css del tipo de menú que quiero:

/* Some stylesheet reset */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}

/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 150px;
}

/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}

/* General link styling */
#cssmenu > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
border-top: 1px dotted #3a3a3a;
border-bottom: 1px dotted #1b1b1b;
padding: 11px 20px;
width: 110px;

/* Typography */
font-family: Helvetica, Arial, sans-serif;
color: #d8d8d8;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 1px #000;
font-size: 13px;
font-weight: 300;

/* Background & effects */
background: #282828;
}

/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child>a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
}

/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 0;
}

/* The hover state of the menu/submenu links */
#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
color: #3cc4e6;
text-shadow: 0 1px 0 #fff;
background: #e6e6e6;
background: -webkit-linear-gradient(bottom, #e6e6e6, #fff);
background: -ms-linear-gradient(bottom, #e6e6e6, #fff);
background: -moz-linear-gradient(bottom, #e6e6e6, #fff);
background: -o-linear-gradient(bottom, #e6e6e6, #fff);
border-color: transparent;
}

/* The arrow indicating a submenu */
#cssmenu > ul .has-sub>a::after {
content: ”;
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;

/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}

/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub>a::before {
content: ”;
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;

/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}

/* Changing the color of the arrow on hover */
#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
border-left: 4px solid #3cc4e6;
}

#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
border-left: 4px solid #fff;
}

/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 150px;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}

/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover>ul {
top: 0px;
opacity: 1;
}

 

Y lo pegué al final en la hoja de estilos de mi tema (style.css)

Luego creé una entrada de prueba, que podéis ver  http://www.elnauta.net/archivo-guias/prueba-de-indice/

Y antes de poner las ul, li y toda esa serie de cosas, hice una llamada al código de la siguiente manera:

link rel=”STYLESHEET” type=”text/css” href=”style.css” (todo eso entre “<” y “>”)

y funciona, pero mal, porque al pasar el ratón por encima del apartado “Cocina”, se abren los subapartados “postres” y “platos principales”, pero no consigo llegar a ellos para abrir otros subapartados.

Me imagino que el error está en el css, aunque probándolo en mi pc funciona bien.

¿Qué es lo que pasa?

Pin It on Pinterest

Ir al contenido