How do I style my new submenus to hide behind and drop down behind my current links WITHOUT re-styling everything? I thought adding class selectors would work
Your dealing with inheritance here and you will need to override any <li> or <a> styles in the sub-UL if you want them to be different.
Regardless of whether you set a class on them or not they are still inheriting their styles.
Ralph has shown you how to target them using descendant selectors rather than classes.
To hide the sub-UL you will want to set it to position:absolute; to remove it from the normal flow (so it doesn't push other elements around when it drops). That sub-UL is normally hidden off-screen with a large negative margin, then that margin is set to zero on li:hover ul to reveal the dropdown.
I put together some very simple examples a while back that show the basic concept.
Simple Dropdown #1
Simple Dropdown #2
If you view the page source you will find the complete code.
I will also point out that you have some errors in your nesting. You did not close the first parent LI and the second sub-UL was not nested at all, only a LI can be the direct descendant of an UL. You can also hook that "navigation" ID directly to the UL and loose the div.
<font color='Blue'><ul id="navigation"></font>
<font color='Blue'><li></font><a href="painting.html">painting</a>
<li><a href="still lifes.html">still lifes</a></li>
<font color='Blue'><li></font><a href="drawing.html">drawing</a>