Simple Css Horizontal Drop Dopwn best example
<html>
<head>
<style>
ul
{
list-style-type: none;
}
li
{
float:left;
position:relative;
}
ul li a
{
text-align: center;
height:30px;
width:150px;
text-decoration:none;
display:block;
color:#00;
border:solid;
}
ul ul
{
position:absolute;
visibility : hidden;
}
ul li:hover ul
{
visibility: visible;
}
</style>
</head>
<body>
<ul>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Trading and Financial Product</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Network Engineering</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Graphic Design</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
</ul>
</body>
</html>
No comments:
Post a Comment