Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Menu Dropdown

    Diunggah oleh

    Setiawan Setiyana
    10 tayangan3 halaman
    fasdfas

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    fasdfas

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan3 halaman

    Membuat Menu Dropdown

    Diunggah oleh

    Setiawan Setiyana
    fasdfas

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Membuat menu dropdown

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Scrip - Membuat Menu Dropdown</title>
    <link href="style.css" rel="stylesheet" />

    </head>
    <body>

    <nav>
    <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tutorial</a>
    <ul>
    <li><a href="#">PHP</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">HTML</a>
    <ul>
    <li><a href="#">Pemula</a></li>
    <li><a href="#">Mahir</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Nyekrip</a>
    <ul>
    <li><a href="#">Ngoding</a></li>
    <li><a href="#">Scrip</a></li>
    </ul>
    </li>
    <li><a href="#">Tentang</a>
    <ul>
    <li><a href="#">Kontak</a></li>
    <li><a href="#">Blog</a></li>
    </ul>
    </li>
    </ul>
    </nav>

    </body>
    </html>
    File pendukung css
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote
    {
    margin: 0; padding: 0; border: 0;
    }

    body {
    background: #fff;
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
    }

    nav {
    margin: 100px auto;
    text-align: center;
    }

    nav ul ul {
    display: none;
    }

    nav ul li:hover > ul {


    display: block;
    }

    nav ul {
    background: #53bd84;
    padding: 0 20px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
    }
    nav ul:after {
    content: ""; clear: both; display: block;
    }

    nav ul li {
    float: left;
    }
    nav ul li:hover {
    background: #666;
    }
    nav ul li:hover a {
    color: #fff;
    }

    nav ul li a {
    display: block; padding: 25px 40px;
    color: #fff; text-decoration: none;
    }

    nav ul ul {
    background: #53bd84; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    }
    nav ul ul li {
    float: none;
    border-top: 1px solid #53bd84;
    border-bottom: 1px solid #53bd84; position: relative;
    }
    nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
    }
    nav ul ul li a:hover {
    background: #666;
    }

    nav ul ul ul {
    position: absolute; left: 100%; top:0;
    }

    Anda mungkin juga menyukai