Latihan CSS

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 : http://bharatakreatif.blogspot.co.id

0 komentar:

Posting Komentar

Tolong komentarnya berhubungan dengan artikel yang ada. Komentar yang akan mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.

Terimakasih

feby. Diberdayakan oleh Blogger.

Latest Post

Text

Advertisements

Popular Posts