Recursos y Mas

Web de recursos

30. septiembre 2012

Menu Horizontal Con HTML y CSS

Menu Horizontal para que lo pueda colocar en tu web...

Codigo HTML

<div class="menu">
                <ul>
                        <li><a href="#" _mce_href="#" >INICIO</a></li>
                        <li><a href="#" _mce_href="#" id="GALERIA">GALERIA</a>
                                <ul>
                                        <li><a href="#" _mce_href="#">G 1</a></li>       
                                        <li><a href="#" _mce_href="#">G 2</a></li>
                                        <li><a href="#" _mce_href="#">G 3</a></li>
                                        <li><a href="#" _mce_href="#">G 4</a></li>
                    <li><a href="#" _mce_href="#">G 5</a></li>
                           </ul>
                  </li>
                        <li><a href="#" _mce_href="#">RECURSOS</a>
                <ul>
                <li><a href="#" _mce_href="#">R 1</a></li>
                <li><a href="#" _mce_href="#">R 2</a></li>
                <li><a href="#" _mce_href="#">R 3</a></li>
                <li><a href="#" _mce_href="#">R 4</a></li>
                </ul>
          </li>
                        <li><a href="#" _mce_href="#">CONTACTO</a></li>
                </ul>
        </div>

Codigo CSS

.menu{
        border:none;
        border:0px;
        margin:0px;
        padding:0px;
        font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        }
.menu ul{
        background:#000;
        height:35px;
        list-style:none;
        margin:0;
        padding:0;
        }
        .menu li{
                float:left;
                padding:0px;
                }
        .menu li a{
                background:#000 url("images/seperator.gif") bottom right no-repeat;
                color:#cccccc;
                display:block;
                font-weight:normal;
                line-height:35px;
                margin:0px;
                padding:0px 25px;
                text-align:center;
                text-decoration:none;
                }
                .menu li a:hover, .menu ul li:hover a{
                        background: #BA3606  bottom center no-repeat;
                        color:#FFFFFF;
                        text-decoration:none;
                        }
        .menu li ul{
                background:#333333;
                display:none;
                height:auto;
                padding:0px;
                margin:0px;
                border:0px;
                position:absolute;
                width:225px;
                z-index:200;
                /*top:1em;
                /*left:0;*/
                }
        .menu li:hover ul{
                display:block;
                
                }
        .menu li li {
                background:url('images/sub_sep.gif') bottom left no-repeat;
                display:block;
                float:none;
                margin:0px;
                padding:0px;
                width:225px;
                }
        .menu li:hover li a{
                background:none;
                
                }
        .menu li ul a{
                display:block;
                height:35px;
                font-size:12px;
                font-style:normal;
                margin:0px;
                padding:0px 10px 0px 15px;
                text-align:left;
                }
                .menu li ul a:hover, .menu li ul li:hover a{
                        background:#BA3606 center left no-repeat;
                        border:0px;
                        color:#ffffff;
                        text-decoration:none;
                        }
        .menu p{
                clear:left;
                }

Ver Demo

Etiquetas: CSS, HTML, Menu, 10

Escribir comentario

Comentarios: 3

#1
Jose (viernes, 26 abril 2013 11:09)

Amigo muy buen post, me podrías decir como lograr centrarlo, siempre queda a la izquierda, te lo agradecería.
#2
assad (viernes, 26 abril 2013 13:35)

<center>...?
#3
Carlos (martes, 25 junio 2013 09:03)

Muy bueno, gracias.