Pure CSS3 Horizontal Menu

by Nikhil Mangal

HTML

<ul id="menu1">
	<li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<br />
<br />
<ul id="menu2">
	<li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<br />
<br />
<ul id="menu3">
	<li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS

#menu1
{
	display:table;
	margin:0px;
	padding:0px;
	list-style:none;
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #ED0909),
	color-stop(1, #D13483)
);
background-image: -o-linear-gradient(bottom, #ED0909 0%, #D13483 100%);
background-image: -moz-linear-gradient(bottom, #ED0909 0%, #D13483 100%);
background-image: -webkit-linear-gradient(bottom, #ED0909 0%, #D13483 100%);
background-image: -ms-linear-gradient(bottom, #ED0909 0%, #D13483 100%);
background-image: linear-gradient(to bottom, #ED0909 0%, #D13483 100%);

}

#menu1 li
{
	float:left;
}
#menu1 li a
{
	
	display:block;
	text-decoration:none;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	height:50px;
	line-height:50px;
	padding:0px 30px;
	border-bottom:solid 3px #eb0c12;
	
}
#menu1 li a:hover
{
	background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #1F1D1D),
	color-stop(1, #000000)
);
background-image: -o-linear-gradient(bottom, #1F1D1D 0%, #000000 100%);
background-image: -moz-linear-gradient(bottom, #1F1D1D 0%, #000000 100%);
background-image: -webkit-linear-gradient(bottom, #1F1D1D 0%, #000000 100%);
background-image: -ms-linear-gradient(bottom, #1F1D1D 0%, #000000 100%);
background-image: linear-gradient(to bottom, #1F1D1D 0%, #000000 100%);
border-bottom:solid 3px #000;


}

#menu2
{
	display:table;
	margin:0px;
	padding:0px;
	list-style:none;
	Code

Copy
background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #5809A1),
	color-stop(1, #340A5E)
);
background-image: -o-linear-gradient(bottom, #5809A1 0%, #340A5E 100%);
background-image: -moz-linear-gradient(bottom, #5809A1 0%, #340A5E 100%);
background-image: -webkit-linear-gradient(bottom, #5809A1 0%, #340A5E 100%);
background-image: -ms-linear-gradient(bottom, #5809A1 0%, #340A5E 100%);

}

#menu2 li
{
	float:left;
}
#menu2 li a
{
	
	display:block;
	text-decoration:none;
	color:#fff;
	font-family:Arial, Helvetica,...