Navbar

Navbar that doesn't work for some reason

HTML

<div id="navbar">
<ul id="navbarlist">
<li class="navbar"><a href="foo" class="navbar">foo</a></li>
<li class="navbar"><a href="bar" class="navbar">bar</a></li>
<li class="navbar"><a href="lol" class="navbar">lol</a></li>
</ul>
</div>

CSS

body {
	background-image: url('/bgimage.php');
	background-attachment: fixed;
	color: white;
	font-size: 16pt;
	margin-top: 20px;
}
h1 {
	text-align: center;
	color: #000000;
}
#navbar {
    margin-left: 3em;
    margin-right: 3em;
    border: .25em solid #00ffff;
}
#navbarlist {
    text-align: justify;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
    margin-bottom: 1.25em;
}
ul:before {
    content: '';
    display: block;
    margin-top: -1.25em;
}
li.navbar {
    background-color: #00aeef;
    color: #ffffff
    display: inline-block;
    margin-right: -.25em;
    padding: .75em 1.5em;
    position: relative;
    top: 1.25em;
}