How to Make Sample Menu using HTML & CSS

by Rakesh on July 8, 2014 · 0 comments

Hello Friends.

In this post we can teach u How to Make Simple Horizontal Menu using HTML Tag & CSS.

Simple Menu

 

In Above Simple Menu Only HTML Tag & CSS code is used.

CSS Code :

/* CSS Document */
.cont{
width:880px;
height:15px;
margin:0 auto;
}
.menu{
font:Georgia 2em;
list-style:none;
padding:0;
margin:0;
background:#060;
text-transform:uppercase;
border-bottom: solid 3px #F90;
border-top: solid 1px #ddd;
}
.menu li{
	display:inline-block;
	zoom:1;
	*display:inline;
	padding:5px 15px 4px 15px;
}
.menu li:hover{
	background:#000;
}
.menu li a:active{
	background:#000;
	color:#F90;
}
.menu li a{
	color:#fff;
	text-decoration:none;
	line-height:1.6em;

}
.menu li a:hover{
	color:#F90;

}

HTML Code :

<html>
<head>
    <title>Sample Menu By Real IT Tricks</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
     <div>
         <h1>Header</h1>
 		<ul>
<li><a href="#">General</a></li>
<li><a href="#">Customaer</a></li>
<li><a href="#">Report</a></li>
<li><a href="#">Suplier</a></li>
<li><a href="#">Transaction</a></li>
<li><a href="#">Login</a></li>
</ul>
<h1>Some paragraph here.</h1>
</div>
</body>
</html>

If you Like this post than share your friends…:)

Leave a Comment

Previous post:

Güncel Haberler