Untuk membuat navigasi bertingkat dibutuhkan ketelitian yang ekstra. Ikuti langkah-langkah berikut ini:
1. Buka file Dreamweaver baru atau file simpanan kalian. Mode tampilan bisa Code atau Split.
2. Cari kode html </head> dan masukan kode berikut ini:
3. Masukan kode berikut ini dibawah kode <body> atau tempat yang kalian inginkan:
1. Buka file Dreamweaver baru atau file simpanan kalian. Mode tampilan bisa Code atau Split.
2. Cari kode html </head> dan masukan kode berikut ini:
<style type="text/css">Apabila sudah terdapat kode <style type="text/css"> dan </style> , maka kode ini tidak perlu ditambahkan. Cukup dimasukan kode lainnya di bawah kode <style type="text/css">.
#nav {
background-color:#333;
color:white;
font:normal 10px Arial,Sans-Serif;
text-transform:uppercase;
}
#nav ul {
margin:0px 0px;
padding:0px 0px;
height:30px;
}
#nav li {
margin:0px 0px;
padding:0px 0px;
float:left;
display:inline;
list-style:none;
position:relative;
}
#nav a {
display:block;
padding:0px 15px;
line-height:30px;
text-decoration:none;
background-color:#333;
color:white;
}
#nav a:hover {
background-color:#666;
}
#nav li ul {
width:170px;
height:auto;
position:absolute;
top:100%;
left:0px;
z-index:10;
display:none;
}
#nav li li {
display:block;
float:none;
}
#nav li:hover > ul {
display:block;
}
#nav li ul ul {
left:100%;
top:0px;
}
</style>
3. Masukan kode berikut ini dibawah kode <body> atau tempat yang kalian inginkan:
<nav id="nav">Selesai. Ubahlah hyperlink yang ada pada Navigasi tersebut. Jika masih bingung, silakan comment..
<ul>
<li><a href="index.html" target="_self">Beranda</a></li>
<li><a href="tutorial.html" title="blog" target="_self">Blog</a><a href="tutorial.html" target="_self"></a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="photo.html" target="_self">photo</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
<li><a href="about.html" target="_self">about</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a>
<ul>
<li><a href="#">Submenu 2.1</a></li>
<li><a href="#">Submenu 2.2</a></li>
<li><a href="#">Submenu 2.3</a></li>
<li><a href="#">Submenu 2.4</a></li>
</ul>
</li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
</ul>
</li>
</ul>
</nav>
0 comments:
Post a Comment