Membuat Menu Drop Down
Home
Sarana
·
Ruang Kuliah
·
Laboratorium
·
Aula
·
Sarana Ibadah
Akademik
·
Kemahasiswaan
·
Dosen
·
Kurikulum
·
Alumni
Berita
·
Pendaftaran
·
Seminar
·
Wisuda
Tentang
Kami
<html>
<head>
<title>Belajar
Menu CSS</title>
<link
href="Mystyle.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<table
width="100%" border="0"
align="center">
<tr>
<td><div id="menu">
<ul>
<b>
<li><a
href="#">Home</a></li>
<li><a
href="#">Sarana</a>
<ul>
<li><a
href="#">Ruang Kuliah</a></li>
<li><a
href="#">Laboratorium</a></li>
<li><a href="#">Aula</a></li>
<li><a
href="#">Sarana Ibadah</a></li>
</ul>
</li>
<li><a
href="#">Akademik</a>
<ul>
<li><a
href="#">Kemahasiswaan</a></li>
<li><a
href="#">Dosen</a></li>
<li><a
href="#">Kurikulum</a></li>
<li><a
href="#">Alumni</a></li>
</ul>
</li>
<li><a
href="#">Berita</a>
<ul>
<li><a
href="#">Pendaftaran</a></li>
<li><a
href="#">Seminar</a></li>
<li><a
href="#">Wisuda</a></li>
</ul>
</li>
<li><a
href="#">Tentang Kami</a></li>
</b>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
#menu{
position:relative;
width:100%;
height:40px;
background:#000000;
border:1px
solid #000000;
}
#menu ul{
padding:0;
margin:0;
list-style:none;
}
#menu ul li{
float
: left;
position:relative;
}
#menu ul li a{
float:left;
color:#000000;
padding:10px;
border-right:1px
solid #000000;
text-decoration:none;
display:block;
}
#menu ul li a:hover{
background-color:#CCFF00;
color:#990000;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul{
display:block;
position:absolute;
top:41px;
left:0;
}
#menu ul li:hover ul li a{
display:block;
background:#99FF00;
color:#000000;
width:130px;
border-left:1px
solid #000000;
}
#menu ul li:hover ul li a:hover{
background:#000000;
color:#FFFFFF;
}
Leave a Comment