Mostrar Mensajes
1
Preguntas, Ideas y Reclamaciones. / ¿Ayuda CSS: flecha o puntero ( >) integrada dentro de un sub menú (Dreamweaver)?
« en: 17 de Enero de 2014, 17:45:00 pm »
Hola a todos!
Estoy haciendo un Menú Multinivel y le he integrado una flecha (dentro del menú) sacado del Menú Spry.
Me ha funcionado todo, excepto, una flecha (:hover) que apunta hacia la izquierda con el código css.
(El código está al final de este post: Flecha Izquierda HOVER)
Aquí adjunto un archivo .rar (que almacené en Google Drive) para que alguien lo descargue y me pueda ayudar. Ya intenté varias veces pero no he dado con el código. T.T
Link de descarga:
Menú css multinivel horizontal con flecha integrada
http://bit.ly/1dBQBYl (incluye las imágenes de las flechas.png)
Aquí pego el código CSS.
Saludos a todos!
---
CSS
@charset "utf-8";
/* CSS Document */
* {
font-family:"Myriad Pro", "Myriad Pro Cond";
list-style:none;
text-decoration:none;
margin: 0px;
padding: 0px;
outline: 0;
}
html, body {
width: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(background2.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#menu {
text-align: left; /*posicion de las opciones del menu principal*/
font-size: 15px;
width: 960px;
margin: 20px auto;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
/* width: 162px;*/
width:auto;
}
#menu ul li.nivel1 {
float: left;
/* margin-right: 2px;*/
margin-right:1px;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #555;
background-color: #fff;
/* border: solid 1px #fff;*/
border-bottom:1px solid #CCC;
/* margin:0 1px;*/
padding:15px 20px;
position: relative; /*nuevo*/
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {
color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block!important;
display: none;
position: relative;
}
#menu ul li:hover {
position: relative;/* primer :hover del menu, cambio de color con mouse sobre el boton*/
}
#menu ul li:hover ul {
font-size:12px; /*tamaño de tipografia del submenu*/
}
#menu li:hover li a:hover {
background:#222; /*color de recuadros submenu*/
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #888;
color: #fff;
position: relative;
}
#menu ul li ul {
display: none; /*desaparecen los sub-menus*/
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
position: absolute;
left: 0px;
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
display: block;
position: absolute;
left: 161px!important;left: 160px;
top:0px!important;top: -21px;
}
/*diseño del sub-menu*/
#menu ul li ul li a {
width: 154px;
padding: 6px 0px 8px 6px;/*arriba-derecha-abajo-izquierda*/
/* border-top-color: transparent;*/
border-top-color: #000;
}
#menu ul li ul li a:hover {
border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {
border-top-color: #fff;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
/*************************************…
SUBMENU INDICATION: Flecha Abajo / Flecha Abajo HOVER
****************************************…
#menu ul li a.nivel1, #menu ul li a.nivel2 { /*correcto*/
background-image: url(_img/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#menu ul li a.nivel1.nuevo, #menu ul li a.nivel2.nuevo{
background-image: url(_img/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1
{
background-image: url(_img/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*************************************…
SUBMENU INDICATION: Flecha Izquierda / Flecha izquierda HOVER
****************************************…
#menu ul li a.nivel2, #menu ul li a.nivel3{ /*correcto*/
background-image: url(_img/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#menu... /*ARREGLAR*/ {
background-image: url(_img/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
--
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menú</title>
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Robots" content="index, follow" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1">PORTADA</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 1.1</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">CATEGORÍAS</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">HUERTO</a></li>
<li><a href="#">POST COSECHA</a></li>
<li class="nivel2"><a class="nivel2" href="#">QUÍMICOS DE LIMPIEZA Y DESINFECCIÓN »</a>
<!--[if lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]-->
<ul class="nivel3">
<li><a class="primera" href="#">DIVERSEY</a></li>
<li><a href="#">CLORO</a></li>
<!-- <li><a href="http://www.idplus.org">idplus.org</a></li>-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#">ELITE</a></li>
<li><a href="http://www.idplus.org">OTROS</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">NUESTRA EMPRESA</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">CLIENTES</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">CONTACTO</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
</div>
</body>
</html>
Estoy haciendo un Menú Multinivel y le he integrado una flecha (dentro del menú) sacado del Menú Spry.
Me ha funcionado todo, excepto, una flecha (:hover) que apunta hacia la izquierda con el código css.
(El código está al final de este post: Flecha Izquierda HOVER)
Aquí adjunto un archivo .rar (que almacené en Google Drive) para que alguien lo descargue y me pueda ayudar. Ya intenté varias veces pero no he dado con el código. T.T
Link de descarga:
Menú css multinivel horizontal con flecha integrada
http://bit.ly/1dBQBYl (incluye las imágenes de las flechas.png)
Aquí pego el código CSS.
Saludos a todos!
---
CSS
@charset "utf-8";
/* CSS Document */
* {
font-family:"Myriad Pro", "Myriad Pro Cond";
list-style:none;
text-decoration:none;
margin: 0px;
padding: 0px;
outline: 0;
}
html, body {
width: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(background2.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#menu {
text-align: left; /*posicion de las opciones del menu principal*/
font-size: 15px;
width: 960px;
margin: 20px auto;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
/* width: 162px;*/
width:auto;
}
#menu ul li.nivel1 {
float: left;
/* margin-right: 2px;*/
margin-right:1px;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #555;
background-color: #fff;
/* border: solid 1px #fff;*/
border-bottom:1px solid #CCC;
/* margin:0 1px;*/
padding:15px 20px;
position: relative; /*nuevo*/
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {
color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {
display: block!important;
display: none;
position: relative;
}
#menu ul li:hover {
position: relative;/* primer :hover del menu, cambio de color con mouse sobre el boton*/
}
#menu ul li:hover ul {
font-size:12px; /*tamaño de tipografia del submenu*/
}
#menu li:hover li a:hover {
background:#222; /*color de recuadros submenu*/
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #888;
color: #fff;
position: relative;
}
#menu ul li ul {
display: none; /*desaparecen los sub-menus*/
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{
display: block;
position: absolute;
left: 0px;
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
display: block;
position: absolute;
left: 161px!important;left: 160px;
top:0px!important;top: -21px;
}
/*diseño del sub-menu*/
#menu ul li ul li a {
width: 154px;
padding: 6px 0px 8px 6px;/*arriba-derecha-abajo-izquierda*/
/* border-top-color: transparent;*/
border-top-color: #000;
}
#menu ul li ul li a:hover {
border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {
border-top-color: #fff;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
/*************************************…
SUBMENU INDICATION: Flecha Abajo / Flecha Abajo HOVER
****************************************…
#menu ul li a.nivel1, #menu ul li a.nivel2 { /*correcto*/
background-image: url(_img/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#menu ul li a.nivel1.nuevo, #menu ul li a.nivel2.nuevo{
background-image: url(_img/SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1
{
background-image: url(_img/SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*************************************…
SUBMENU INDICATION: Flecha Izquierda / Flecha izquierda HOVER
****************************************…
#menu ul li a.nivel2, #menu ul li a.nivel3{ /*correcto*/
background-image: url(_img/SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#menu... /*ARREGLAR*/ {
background-image: url(_img/SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
--
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Menú</title>
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Robots" content="index, follow" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1">PORTADA</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 1.1</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">CATEGORÍAS</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">HUERTO</a></li>
<li><a href="#">POST COSECHA</a></li>
<li class="nivel2"><a class="nivel2" href="#">QUÍMICOS DE LIMPIEZA Y DESINFECCIÓN »</a>
<!--[if lte IE 6]><a href="#" class="nivel2ie">Opción 2.3 »<table class="falsa"><tr><td><![endif]-->
<ul class="nivel3">
<li><a class="primera" href="#">DIVERSEY</a></li>
<li><a href="#">CLORO</a></li>
<!-- <li><a href="http://www.idplus.org">idplus.org</a></li>-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#">ELITE</a></li>
<li><a href="http://www.idplus.org">OTROS</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">NUESTRA EMPRESA</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">CLIENTES</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">CONTACTO</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
</div>
</body>
</html>
