Weird list item link problem

I have the following HTML code:

<ul>
	<li><a href="about.htm">About NMO</a></li>
	<li><a href="organisation.htm">NMO Organisation</a></li>
	<li><a href="membership.htm">Membership</a></li>
	<li><a href="announcement.htm">Announcement</a></li>
	<li><a href="journal.htm">Journal</a></li>
	<li><a href="programmes.htm">Programmes</a></li>
	<li><a href="photogallery.htm">Photo Gallery</a></li>
	<li><a href="studentcorner.htm">Student Corner</a></li>
</ul>

Code (markup):

And CSS:

ul
{
	margin-top: 5px;
	margin-bottom: 5px;
}

Code (markup):

For some reason, the bottom link 'Student Corner' does not work. I have no idea why. However, if I create some space below the link like:

ul
{
	margin-top: 5px;
	margin-bottom: 20px;
}

Code (markup):

Then, the link works. What can I do to resolve this problem?