Regresar a la pgina www.ComoCrearTuWeb.com
Resultados 1 al 1 de 1

Tema: Cmo dar transition a este men???

  1. #1
    Recien Llegado! Pasaba por aqu...
    Fecha de Ingreso
    18 jun, 19
    Mensajes
    1
    Poder de Reputacin
    0

    Cmo dar transition a este men???

    Tengo este html:

    Cdigo HTML:
    <div id="menu">
    <ul>
    <li class="nivel1"><a href="#" class="nivel1">Inicio</a></li>
    <li class="nivel1"><a href="#" class="nivel1">Nosotros</a></li>
    <li class="nivel1"><a href="#" class="nivel1">Marcas</a>
    <ul class="nivel2">
    <li><a href="#">Opcin 2.1</a></li>
    <li><a href="#">Opcin 2.2</a></li>
    <li class="nivel2"><a class="nivel2" href="#">Opcin 2.3 </a>
    <ul class="nivel3">
    <li><a class="primera" href="#">Opcin 2.3.1</a></li>
    <li><a href="#">Opcin 2.3.2</a></li>
    <li><a href="#">Opcin 2.3.3</a></li>
    </ul>
    <li><a href="#">Opcin 2.4</a></li>
    <li><a href="#">Opcin 2.5</a></li>
    </li>
    </ul>
    </li>
    </li>
    <li class="nivel1"><a href="#" class="nivel1">Ropa</a>
    <ul class="nivel2">
    <li><a href="#">Chaquetas</a></li>
    <li><a href="#">Abrigos</a></li>
    <li><a href="#">Camisetas</a></li>
    </ul>
    </li>
    <li class="nivel1"><a href="#" class="nivel1">Regalos</a>
    <ul class="nivel2">
    <li><a href="#">Opcin 4.1</a></li>
    <li><a href="#">Opcin 4.2</a></li>
    <li><a href="#">Opcin 4.3</a></li>
    <li><a href="#">Opcin 4.4</a></li>
    </ul>
    </li>
    <li class="nivel1"><a href="#" class="nivel1">Contacto</a></li>
    </ul>
    ...que tiene este CSS:

    Cdigo:
    #menu {
    text-align: center;
    font-size: 20px;
    width: 100%;
    margin: 20px auto;
    }

    #menu ul {
    list-style-type: none;
    }

    #menu ul li {
    width: 162px;
    margin: 0 1%;
    }

    #menu ul li.nivel1 {
    float: left;
    margin-right: 1px;
    }

    #menu ul li a {
    display: block;
    text-decoration: none;
    color: rgba(47,21,146,.;
    background-color: rgba(220,220,220,.7);
    border: solid 1px #fff;
    padding: 8px;
    position: relative;
    }
    #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;
    }

    #menu ul li a:hover, #menu ul li:hover a.nivel1 {
    background-color: #5843D0;
    color: white;
    position: relative;
    }

    #menu .nivel1:hover a.nivel1{
    letter-spacing: .3em;
    }

    #menu ul li ul {
    display: none;
    }

    #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: 159px!important;
    left: 158px;
    top:0px!important;
    top: -21px;
    }

    #menu ul li ul li a {
    width: 159px;
    padding: 8px 0px;
    border-top-color: transparent;
    }

    #menu ul li ul li a:hover {
    border-top-color: yellow;
    position: relative;
    }

    #menu ul li ul li ul li a.primera {
    border-top-color: #fff;
    }

    table.falsa {
    border-collapse:collapse;
    border:0px;xvideos xnxx xxx

    float: left;
    position: relative;
    }
    Cmo puedo darle el efecto de transition? Gracias, un saludo.
    ltima edicin por williamgomes; 20/06/2019 a las 19:39

Temas Similares

  1. Cmo dar transition a este men?
    Por Lombardo en el foro Todo sobre Estilos CSS
    Respuestas: 2
    ltimo Mensaje: 05/04/2014, 05:32
  2. como centrar este men
    Por piojo en el foro Foro General
    Respuestas: 2
    ltimo Mensaje: 20/08/2012, 18:05
  3. como aado este menu?
    Por brans en el foro Foro General
    Respuestas: 1
    ltimo Mensaje: 13/01/2010, 15:07

Permisos de Publicacin

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •