contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


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.



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 Terkait

Diskusi