Horizontal menu bar: Style #4
Black-Horizontal-Navbar-CSS
Demo
By default the hovering background color is black and font color is similar to white. CSS gradients, dotted borders and rounded corners make it is a beautiful menu widget. Want to see how this CSS navigation bar template looks in our demo blog? Click Here.
CSS Code
#Hr-4 {
list-style:none;
margin:0;
padding:0;
float:left;
}
#Hr-4 li {
margin:0;
padding:0;
float:left;
}
#Hr-4 li a {
display:inline;
float:left;
overflow:hidden;
margin:0;
width:auto;
height:auto;
padding:10px 12px;
text-decoration:none;
text-transform:capitalize;
text-align:center;
font-style:normal;
font-weight:bold;
font-size:25px;
border-right:1px dotted #1C1C1C;
color:#ECECEC;
font-family:'Comic Sans MS',cursive;
background:#2C2C2C;
background:-webkit-gradient(linear,left top,right bottom,from(#101010),color-stop(0.35 #2C2C2C),color-stop(0.73 #545252),color-stop(0.90 #3F3C3C),to(#2A2727));
background:-webkit-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-moz-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-o-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:-ms-linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
background:linear-gradient(top,#101010 0%,#2C2C2C 35%,#545252 73%,#3F3C3C 90%,#2A2727 100%);
}
#Hr-4 li:first-child a {
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
}
#Hr-4 li:last-child a {
-moz-border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
border-radius:0 8px 8px 0;
}
#Hr-4 li a:hover,#Hr-4 li a:focus {
background:#2C2C2C;
color:#4A75F7;
cursor:pointer;
}
Last modified: Wednesday, 5 October 2016, 6:59 AM