Autor Tema: ¿Ayuda CSS: flecha o puntero ( >) integrada dentro de un sub menú (Dreamweaver)? (Leído 1060 veces)

boutzero · « **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>

   <ul class="nivel2">
      <li><a href="#">Opción 1.1</a></li>
      <li><a href="http://www.idplus.org">idplus.org</a></li>
   </ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">CATEGORÍAS</a>

   <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>
         
         <ul class="nivel3">
            <li><a class="primera" href="#">DIVERSEY</a></li>
            <li><a href="#">CLORO</a></li>

         </ul>
         </li>
      <li><a href="#">ELITE</a></li>
      <li><a href="http://www.idplus.org">OTROS</a></li>
   </ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">NUESTRA EMPRESA</a>

   <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>

</li>
<li class="nivel1"><a href="#" class="nivel1">CLIENTES</a>

   <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>

</li>
<li class="nivel1"><a href="#" class="nivel1">CONTACTO</a>

   <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>
</li>
</ul>
</div>
</body>

</html>

Noticias:

Autor Tema: ¿Ayuda CSS: flecha o puntero ( >) integrada dentro de un sub menú (Dreamweaver)? (Leído 1060 veces)

boutzero

¿Ayuda CSS: flecha o puntero ( >) integrada dentro de un sub menú (Dreamweaver)?

Comunidad PHPeros

¿Ayuda CSS: flecha o puntero ( >) integrada dentro de un sub menú (Dreamweaver)?