Tuesday 16 July 2013

How To Create Horizontal and Vertical Navigation Menu Using CSS




Description:-

 in this example we explain that how to create a vertical Menu in your WebPage or Website.
Generally we all know that there is a Horizontal Menu in Each and Every Website so we can Built Deiffernt or Unique Menu By using this menu and you can also make your Website very Beautyfull or very user Friendlly.
In this example we create a vertical menu and also give link to this menu so the page is Redirect to this page Directally.

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

Example:-


<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{

font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
This entry was posted in :

3 comments:

  1. but i want both horizintal and vertical as well at same time ... how would i do this ?

    ReplyDelete
  2. you can do with set orientation="vertical" or orientation="Horizontal"

    ReplyDelete