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.
0 Komentar