Pure CSS3 Horizontal Menu

Add these stylish Pure CSS3 Horizontal Menu to your websites. learn how to create these menus just copy and paste code into website and enjot these menus.

CSS3

#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, sans-serif;
 height:50px;
 line-height:50px;
 padding:0px 30px;
 border-bottom:solid 3px #eb0c12;
 
}
#menu2 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;


}


#menu3
{
 display:table;
 margin:0px;
 padding:0px;
 list-style:none;
 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;

}

#menu3 li
{
 float:left;
}
#menu3 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;
 
}
#menu3 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;
}

HTML CODE

Home
About Us
Services
Career
Contact Us


Home
About Us
Services
Career
Contact Us


Home
About Us
Services
Career
Contact Us

Download File Used in this example View Live Demo

Total Downloads: