Menu Example

Example of menu using HTML and CSS 

<html>
<head>
<tittle>
we are working on css file</tittle>
<style>
ul {
margin : 0px;
padding: 0px;

}

ul li {

float:left;
background-color:black;
color:white;
display:block;
width:150px;
height:40px;

text-align:center;
font-size:20px;
line-height:40px;
opacity:.8;

}

ul li a:hover{
background-color:orange;
}

ul li ul li{

display:none;
}
ul li:hover ul li{
display:block;

}

</style>

</head>
<bod>

<ul>
<li> <a href=”#”>Home </a></li>
<li> <a href=”#”>Product </a>
<ul>

<li> <a href=”#”>comptuer </a></li>
<li> <a href=”#”>comptuer Acc. </a></li>
<li> <a href=”#”>Battries </a></li>
</ul>
</li>
<li> <a href=”#”>about us </a></li>
<li> <a href=”#”>contact us </a>
<ul>

<li> <a href=”#”> Home batteries</a></li>
<li> <a href=”#”> company batteries</a></li>
<li> <a href=”#”> usa batteries</a></li>
<li> <a href=”#”> japan batteries</a></li>
</ul>

</li>
</ul>
<body>
</html>

 

 




Follow Us

Contact Us

tutorialworldin@yahoo.com

Back to Top