I am trying to show current page in my menu. I have used the following code;

CSS
#menu#Home a#index
#menu#Studies a#studies
#menu#Books a#books
#menu#Author a#author
#menu#Food For Thought Blog a#food
#menu#Contact us a#contact
#menu#Site Map a#sitemap
{color: #a52a2a;}
html

</div>
<div id="menu" style="background-color: #fffff0"><a id="up"></a>
<nav style="font-family:verdana; padding-top: 3px">
<ul>
<li><a id="index" href="index.html" >Home</a></li>
<li><a id="studies" href="Free-studies-to-download.html">Studies</a></li>
<li><a id="books" href="Free-books-to-download.html">Books</a></li>
<li><a id="author" href="author.html">Author</a><li>
<li><a id="food" href="/wp/">Food For Thought Blog</a></li>
<li><a id="contact" href="contact_us.html">Contact Us</a> </li>
<li><a id="sitemap"href="sitemap.html">Site Map</a></li>
</ul>
</nav>
<hr />
</div>
</div>

I can't get the current page to work. I have also tried removing the # before the menu but that didn't work either. What do I need to do to sort this out?

This is my first website that I have coded.