contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Simple Menu dropdown dengan CSS

Posted in HTML & CSS Life at 11 Maret 2016 With 0 Comments

Membuat Menu drop down dengan CSS

Bagaimana membuat menu dengan  CSS ? ,, kali ini suckittrees dot com akan memberikan tutorial simple Menu dropdown dengan CSS, jika pada artikel sebelumnya kita telah membahas cara membuat menu horizontal dengan CSS, kali ini kita kembangkan lagi menjadi menu dropdown.

▼ Download Source Code Dibawah Ini ▼


Jika teman-teman belum membaca artikel sebelumnya silahkan dibaca dulu ya :

Simple Horizontal Menu dengan CSS

OK... Langsuk kita mulai Tutorial Membuat Menu dropdown dengan CSS :

Demo Download

HTML CODE :

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
  <meta name="author" content="Suckittrees">
  <title>Menu dropdown dengan CSS3 Suckittrees.com</title>
  <link rel="shortcut icon" href="http://suckittrees.com/favicon.png">
  <link rel="icon" href="http://suckittrees.com/favicon.png">
  <link href="style.css" rel="stylesheet">
</head>
<body>
<div class="drop">
<ul class="drop_menu">
<li><a href='#'>Home</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Profil</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Blog</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
</div>
</body>
</html>

CSS CODE (style.css)

/* suckittrees.com Simple CSS Dropdown menu */
.drop_menu {
    background:#DE1F00;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
}
.drop_menu li { float:left; }
.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#CF2C31; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#CF2C31;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#CF2C31;
}
.drop_menu li:hover ul li a:hover { background:#DE1F00; }

Tempatkan 2 file diatas dalam sebuah folder , Untuk kode html, silahkan anda simpan dengan nama index.htm atau apapun itu, sementara untuk file css simpan dengan nama style.css Dan Jalankan file index.htm nya dibrowser anda.

Demo Download

Demikian kode yang digunakan untuk membuat " Menu dropdown dengan css3"

Artikel Rekomendasi



Artikel Terkait

Diskusi