Edit in JSFiddle

.nav_bar ul {
    list-style:none;
    margin:0;
    padding:0;
}
.main_menu li {
    float:left;
    width:100px;
    background:#444444;
    border-right:1px solid white;
    text-align:center;
    position:relative;
    height:30px;
    font-size:15px;
    line-height:30px;
    transition:0.5s;
}
.main_menu li ul li {
    float:none;
    width:150px;
    text-align:left;
    padding-left:5px;
    border-top:1px solid white;
    visibility:hidden;
}
.main_menu li:hover ul li {
    visibility:visible;
    transform:translate(5px, 0px);
}
.main_menu li ul li:hover {
    transform:translate(10px, 0px);
}
.main_menu li ul {
    position:absolute;
    top:30px;
    left:0px;
}
.main_menu li:hover {
    background-color:maroon;
}
.main_menu a {
    text-decoration:none;
    color:white;
}
h2 {
    clear:both;
}