Scribd Logo
Upload

Welcome to Scribd!

  • Como Hacer Un Menu Desplegable en HTML y Css

    Uploaded by

    Malena Espinoza
    245 views5 pages
    mat lab

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    mat lab

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    245 views5 pages

    Como Hacer Un Menu Desplegable en HTML y Css

    Uploaded by

    Malena Espinoza
    mat lab

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    COMO HACER UN MENU DESPLEGABLE EN HTML Y CSS

    <html>
    <head>

    <title>Menu Desplegable</title>

    <style type="text/css">

    *{

    margin:0px;

    padding:0px;

    #header {

    margin:auto;

    width:500px;

    font-family:Arial, Helvetica, sans-serif;

    ul, ol {

    list-style:none;

    .nav > li {

    float:left;

    }
    .nav li a {

    background-color:#000;

    color:#fff;

    text-decoration:none;

    padding:10px 12px;

    display:block;

    .nav li a:hover {

    background-color:#434343;

    .nav li ul {

    display:none;

    position:absolute;

    min-width:140px;

    .nav li:hover > ul {

    display:block;

    .nav li ul li {

    position:relative;
    }

    .nav li ul li ul {

    right:-140px;

    top:0px;

    </style>

    </head>

    <body>

    <div id="header">

    <ul class="nav">

    <li><a href="">Inicio</a></li>

    <li><a href="">Servicios</a>

    <ul>

    <li><a
    href="">Submenu1</a></li>

    <li><a
    href="">Submenu2</a></li>

    <li><a
    href="">Submenu3</a></li>

    <li><a
    href="">Submenu4</a>

    <ul>

    <li><a
    href="">Submenu1</a></li>
    <li><a
    href="">Submenu2</a></li>

    <li><a
    href="">Submenu3</a></li>

    <li><a
    href="">Submenu4</a></li>

    </ul>

    </li>

    </ul>

    </li>

    <li><a href="">Acerca de</a>

    <ul>

    <li><a
    href="">Submenu1</a></li>

    <li><a
    href="">Submenu2</a></li>

    <li><a
    href="">Submenu3</a></li>

    <li><a
    href="">Submenu4</a></li>

    </ul>

    </li>

    <li><a href="">Contacto</a></li>

    </ul>

    </div>

    </body>

    </html>
    COMO COLOCAR IMAGEN DE FONDO

    HTML
    <div>
    <p class="catsandstars">
    This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
    Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
    </div>

    CSS
    pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
    }

    div {
    background-image:
    url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
    }

    p {
    background-image: none;
    }

    .catsandstars {
    background-image:
    url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),

    url("https://mdn.mozillademos.org/files/7693/catfront.png");
    background-color: transparent;
    }

    You might also like