Monday, June 13, 2011

Create Horizontal Menu Bar using HTML and CSS


Following is a simple demonstration of how to get a horizontal menu bar using HTML (using <ul> / <li>) and CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Sample by Yasser.</title>
  <style type="text/css">
.hovermenu ul{
fontbold 18px calibri;
height25px;
}

.hovermenu ul li{
list-stylenone;
displayinline;
}

.hovermenu ul li a{
padding10px 25px 10px 25px;
text-decorationnone;
floatleft;
colorwhite;
background-colorrgb(15,41,77);
border1px solid rgb(15,41,77);
}

.hovermenu ul li a:hover{
background-color#e5e5e5;
color:rgb(15,41,77);
}
</style>
 </head>

 <body>

<div class="hovermenu">
<ul>
<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>
<li><a href="">Menu4</a></li>
<li><a href="">Menu5</a></li>
</ul>
</div>

</body>
</html>

Expected Output:

 Cheers!

6 comments:

swapnil said...

Yasser is it Possible to using ur above code can we create the horizontal Child Sub Menu.
I am follow the XML data sheet for Creating the Horizontal Parent And Child Menu with the Help of Code Behind Technique.
Thanks for Sharing ur Code.

Anonymous said...

thanks very much,but i need child menu thanks in advance

Farid said...

very nice this menu thank you

www.youadd.us

Unknown said...

thanks you very much

Unknown said...

thanks alot think you could give some examples or links on how to modify this menu

Anonymous said...

How do we add child menus, please help

Post a Comment

 

2011 ·Code-Studio by yrus.