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

Desconectado boutzero

  • PHPerit@
  • *
  • Mensajes: 6
  • Karma: 0
  • Nuev@ PHPer@
    • Ver Perfil
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>

Comunidad PHPeros