berikut ini contoh membuat menu drop down horizontal
hasilnya:
<html>
<head>
<title>faruzone</title>
<style>
body{
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
}
.curvebox{
width:250px;
padding:1em;
background-color:#b0c4de;
border:2px solid #33527b;
color:#33527b;
}
#nav1, #nav1 ul{
padding:20px 20px;
margin:0;
list-style:none;
}
#nav1 li{
float:left;
position:relative;
width:10em;
border:1px solid #b0c4de;
background-color:#e7edf5;
color:#2d486c;
font:80% verdana, Geneva, Arial, Helvetica, sans-serif;
margin-right:1em;
}
#nav1 a:link, #nav1 a:visited{
display:block;
text-decoration:none;
padding-left:1em;
color:#2d486c;
}
#nav1 ul{
display:none;
position:absolute;
top:1.3em;
left:0;
padding-top:0.5em;
}
#nav1 ul li{
float:none;
border:0 none transparent;
border-bottom:1px solid #e7edf5;
background-color:#f1f5f9;
font-size:100%;
margin:0;
margin-bottom:0.5em;
padding:0;
}
#nav1 li > ul{
top:auto;
left:auto;
}
#nav1 li:hover ul{
display:block;
}
</style>
</head>
<body>
<ul id="nav1">
<li><a href="#">Starters</a>
<ul>
<li><a href="#">fish</a></li>
<li><a href="#">fruit</a></li>
<li><a href="#">Soups</a></li>
</ul>
</li>
<li><a href="#">main cours</a>
<ul>
<li><a href="#">meat</a></li>
<li><a href="#">fish</a></li>
<li><a href="#">vegetarian</a></li>
</ul>
</li>
<li><a href="#">Desserts</a>
<ul>
<li><a href="#">fruit</a></li>
<li><a href="#">pudding</a></li>
<li><a href="#">ice cream</a></li>
</ul>
</li>
</ul>
<br><br>
<div class="curvebox">
<p>isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi isi</p>
</div>
</body>
</html>
hasilnya:
