Cool Blue Outer Glow Pointer

Selasa, 23 Agustus 2016

Latihan CSS

Pertama kita buat dulu file css nya dengan mengetikan coding dibawah ini

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;
    }
       
kemudian simpan file dengan nama style.css

Setelah itu kita buat file htmlnya dengan code dibawah ini


<html>
<head>
<meta charset="utf-8" />
<title>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="#">Nyekrip Yuk</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>

simpan dengan nama latihan css.html
 
 
Sumber: bharatakreatif.blogspot.co.id

Related Posts:

  • Membuat halaman web dengan Adobe Dreamweaver Buka aplikasi Dreamwaver CS6 kemudian pilih HTML Jika sudah terbuka ganti title dengan SMK Kaya Budi Buatlah table dengan Row = 3 Coloum = 3 Untuk membuat bagian header kita seleksi terlebih dahulu row yang paling … Read More
  • Latihan upload videoTulus-Pamit … Read More
  • Latihan CSS Pertama kita buat dulu file css nya dengan mengetikan coding dibawah ini body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {    margin: 0; paddin… Read More
  • tugs remedial elda Normal 0 false false false EN-US X-NONE X-NONE … Read More
  • Cara Membuat Logo Spider-Man Assalamu'alaikum WR.WB.  Pada Artikel kali ini saya akan memberikan tutorial cara membuat sebuah logo menggunakan Autodesk 3ds Max 2010. Logo merupakan suatu gambar atau sekadar sketsa dengan arti tertentu, dan mewakil… Read More

0 komentar:

Posting Komentar