What is the best way to center my navigation bar links using CSS without losing the grey sides?
Both Blogs and History have dropdown menus. Check out this screenshot:
(source: gyazo.com)
CSS:
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
width: 100px;
background-color: #444444;
text-align: center;
border-right: 1px solid white;
position: relative;
height: 30px;
line-height: 30px;
}
.navbar li ul li {
float: none;
width: 150px;
text-align: left;
padding-left: 5px;
border-top: 1px solid white;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar li ul {
position: absolute;
top: 30px;
left: 0;
visibility: hidden;
}
.navbar li:hover ul {
visibility: visible;
}
.navbar li:hover {
background-color: maroon;
}