Cara Membuat Menu dropdown html dan css
Kali Ini saya akan berbagi Tutorial membuat Menu Dropdown sederhana Hanya Degan Html dan CSS,
Perangkat Pertama Yanag Harus anda Persiapkan adalah Sarana untuk Mengetikkan Code, Anda Bisa Menggunakan,
Perangkat Pertama Yanag Harus anda Persiapkan adalah Sarana untuk Mengetikkan Code, Anda Bisa Menggunakan,
- Notepat.
- Notepat++.
- dll.
Baiklah saya akan Langsung Ketutorial nya..
Buat Halama Index.html :
Penjelasan :
Pada Code
#MenuHeader li ul { display: none; } //Submenu Disembuyikan,
#MenuHeader li:hover ul{ display: block ;} // Ketika Dihover(Mouse fokus pada menu) Maka Sub menu akan ditampilkan
Mudah Bukan.
Ditunggu Kritik Dan sarannya.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#MenuHeader {
float: left;
line-height: 80px;
}
#MenuHeader a {
text-decoration: none;
color: #0062A4;
}
#MenuHeader li{
display: inline;
font-size: 14px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #0099CC;
color: #0062A4;
font-family: Arial, Helvetica, sans-serif;
line-height: 50px;
padding-right: 20px;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-variant: normal;
position: relative;
}
#MenuHeader li:hover ul{
display: block;
}
#MenuHeader li ul {
position: absolute;
z-index: 10;
left: 0px;
white-space: nowrap;
margin: 0px;
padding: 0px;
background-color: #AEDFFF;
border-radius: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
display: none;
top: 28px;
}
#MenuHeader li ul { display: none; }#MenuHeader li ul li {
display: block;
float: none;
white-space: nowrap;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#MenuHeader li ul li:hover {
color: #0064A6;
}
#MenuHeader li:hover{
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #BF0404;
color: #CEECFF;
}
-->
</style>
</head>
<body>
<span id="MenuHeader">
<ul><li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a><ul>
<li><a href="#">Sub Menu1</a></li><li><a href="#">Sub Menu2</a></li></ul>
</li>
<li><a href="#">Menu3</a></li>
</ul></span>
</body>
</html>
Penjelasan :
Pada Code
#MenuHeader li ul { display: none; } //Submenu Disembuyikan,
#MenuHeader li:hover ul{ display: block ;} // Ketika Dihover(Mouse fokus pada menu) Maka Sub menu akan ditampilkan
Mudah Bukan.
Ditunggu Kritik Dan sarannya.