CSS-menu_vertical_horizontal-pseudoclass

Browse more Css Examples
<!DOCTYPE html>
<html>
    <head>
        <title>Problema</title>
        <meta charset="UTF-8">
        <!-- <link rel="StyleSheet" href="estilos.css" type="text/css">-->
        <style>
            #menu {
                font-family: Arial;
            }
            #menu p {
                margin:0px;
                padding:0px;
            }
            #menu a {
                display: block;
                /*El valor block para la propiedad display permite que el ancla ocupe todo el espacio del párrafo, indistintamente del largo del hipervínculo.*/
                padding: 3px;
                width: 160px;
                /*Otra propiedad nueva es width, esta fija el tamaño máximo que puede tener el hipervínculo antes de provocar un salto de línea.*/
                background-color: #f7f8e8;
                border-bottom: 1px solid #eeeeee;
                text-align:center;
            }
            #menu a:link, #menu a:visited {
                color: #ff0000;
                text-decoration: none;
            }
            #menu a:hover {
                background-color: #336699;
                color: #ffffff;
            }
            /**/
            #menuhorizontal {
                margin:0;
                padding:0;
                list-style-type:none;
            }
            #menuhorizontal a {
                width:100px;
                text-decoration:none;
                text-align:center;
                color:#ff0000;
                background-color:#f7f8e8;
                padding:3px 5px;
                border-right:1px solid blue;
                display:block;
                /*En los enlaces del menú inicializamos la propiedad display con el valor block para que el enlace tenga efecto en todo el rectángulo*/
            }
            #menuhorizontal li {
                float:left;
                /*Para que los enlaces aparezcan uno al lado de otro inicializamos la propiedad float con el valor left*/
            }
                #menuhorizontal a:hover {
                background-color:#336699;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <p><a href="https://www.google.com">Google</a></p>
            <p><a href="https://www.yahoo.com">Yahoo</a></p>
            <p><a href="https://www.bing.com">Bing</a></p>
            <p><a href="https://www.ask.com">ASK</a></p>
            <ul id="menuhorizontal">
                <li><a href="https://www.google.com">Google</a></li>
                <li><a href="https://www.yahoo.com">Yahoo</a></li>
                <li><a href="https://www.bing.com">Bing</a></li>
                <li><a href="https://www.ask.com">Ask</a></li>
            </ul>
        </div>
    </body>
</html>
CSS-menu_vertical_horizontal-pseudoclass

Follow

Newsletter
