Nav and List CSS Styling

I have a small nav list that I want to style by removing any bullets or separation lines. I've tried to do this with the following CSS code but it doesn't work.
 

<div id="widget-footer">
		<nav id="widget-footernav">
				<ul>
					<li><a href="#">New Here?</a></li>	
					<li><a href="#">Get Directions</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Donate</a></li>
					<li><a href="#">Volunteer</a></li>	
					
				</ul>
			</nav>
		</div>

Select allOpen in new window

This is in my style.css file:

#widget-footer {
	height: 70px;
	width: 400px;
	padding: 32px;
	margin: 0 auto;
}	

#widget-footer #footernav ul {
	float: left;
	width: 400px;
	margin: 0 0 0 40px;
}

#widget-footer #footernav ul li {
	float: left;
	list-style-type: none;
	margin: 0 0 6px 10px;
	width: 156px;
}

#widget-footer #footernav ul li a:link, #footer #footernav ul li a:visited {
	font-size: 0.875em;
	display: block;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	color: #636363;
}

#widget-footer #footernav ul li a:hover, #footer #footernav ul li a:active {
	font-size: 0.875em;
	display: block;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	color: #fff;
}

Select allOpen in new window

Thanks!

Frank