index.html

<div id="container">
	<div id="header">
	<h1><a href="#">Ock Associates</a></h1>
	<ul id="nav">
   		<li><a href="#">HOME</a></li>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">PRACTICE AREA</a></li>
		<li><a href="#">NEWS</a></li>
        <li><a href="#">PUBLISHED BOOKS</a></li>
        <li><a href="#">CONTACT US</a></li>
	</ul>
    
	<ul id="topcorner">
		<li><a href="#">Career</a> | <a href="#">Mail</a></li>
	</ul>

style.css

#header ul#topcorner {
		float: right; margin: 20px 50px 0 0;	
		font: 12px Arial, Helvetica, sans-serif; color: white; 
	}

I thought I already set the font color to white but in actual I still see a blue link font color. How to set it to white ?

You need to style the <a> tag font color. By default, linked text is blue and underlined.

style.css

#header ul#topcorner a:link{
     font: 12px Arial, Helvetica, sans-serif; color: white;
     }

How to erase the underline ?

You should really do some studying. This is basic stuff. http://www.w3schools.com is a great place to learn the fundamentals.

a {text-decoration: none;}