I'd recommend not using it if it all possible! The only time (off the top of my head) I see a valid use of it is when you need to have a cross browser minimum height set for an element:
e.g, min-height: 100px; height: auto !important; height: 100px;
The more you start adding hacks like !important into your styles the less control you end up having over whats going on which invariably leads to more and more hacks needed to keep sites working across browsers. The extra time spent in working out exactly why things display differently in two different browsers (e.g FF and IE ) will save you loads of time wasted from the headaches of hacks!
If you ever need any CSS help, splicing or templating we offer a service that may be useful - visit http://www.wecss.co.uk for more information, or contact us via our info@ email address.
Hopefully we can provide some help for you if needed!
Removing of the return false; has nothing to do with the lavalamp not being over the link/page that you're on. It seems to be flakey when the page first loads - for me in Firefox it stretches from the 'm' of home to 'Events' until you hover over it and then it sorts itself out (In ie6 you have a job on your hands!).
The code for the lavalamp works as is if your site loaded the content without a page refresh on the nav clicks but what you need to do if you are going to remove the 'return false;' is to add a class to the <li> element containing the current link called class='current'.
e.g, for the Sales page it needs to read:
<ul class="lavaLampWithImage" id="1">
<li><a href="index.html">Home</a></li>
<li class="current"><a href="sales.html">Sales</a></li>
<li><a href="hire.html">Hire</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="servicing.html">Servicing</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
Hope that helps!