I have a vertical menu on my site, with one option that expands to the left on hover. I want to stylize the text that appears in the expanded list, but leave the text in the parent list as is. How do I do this?

Here is my html code and css code pertaining to this list:

HTML:
<div id="menu">
<ul>
<li><h2>Inside the Dept. <br />
of Medicine</h2>
<ul>
<li><a href="#" title="Section List">Sections</a>
<ul>
<li><a href="#" title="Cardiovascular Medicine">Cardiovascular Medicine</a></li>
<li><a href="#" title="Clinical Epidemiology">Clinical Epidemiology</a></li>
<li><a href="#" title="Endocrinology, Diabetes and Nutrition">Endocrinology, Diabetes and Nutrition</a></li>
<li><a href="#" title="Gastroenterology">Gastroenterology</a></li>
<li><a href="#" title="General Internal Medicine">General Internal Medicine</a></li>
<li><a href="Geriatrics.html" title="Geriatrics">Geriatrics</a></li>
<li><a href="#" title="Hematology and Medical Oncology">Hematology and Medical Oncology</a></li>
<li><a href="#" title="Hypertension">Hypertension</a></li>
<li><a href="#" title="Infectious Diseases">Infectious Diseases</a></li>
<li><a href="#" title="Molecular Medicine">Molecular Medicine</a></li>
<li><a href="#" title="Nephrology">Nephrology</a></li>
<li><a href="#" title="General Internal Medicine">General Internal Medicine</a></li>
<li><a href="#" title="Preventive Medicine">Preventive Medicine</a></li>
<li><a href="#" title="Pulmonology">Pulmonology</a></li>
<li><a href="#" title="Rheumatology">Rheumatology</a></li>
</ul>
<li><a href="#" title="Introduction">Introduction</a></li>
<li><a href="#" title="Faculty">Faculty</a></li>
<li><a href="#" title="Research">Research</a></li>
<li><a href="#" title="Special Programs & Centers">Special Programs & Centers</a></li>
<li><a href="#" title="Affiliated Hospitals">Affiliated Hospitals</a></li>
<li><a href="#" title="Newsletter">Newsletter</a></li>
<li><a href="#" title="Annual Report">Annual Report</a></li>
</ul>
</li></ul>
</div>

CSS:
#menu {
width: 180px;
text-align:left;
margin-right: 0px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 14px/18px Arial, Helvetica, sans-serif;
line-height: 26px;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #212121;
background-image:url(images/banner.gif);
text-transform: uppercase;
text-align:left;
}

#menu a {
color: #212121;
background: #E0E0E0;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: -100%;
width: 100%;
}

div#menu ul ul ul
{display: none;}

div#menu ul ul li:hover ul
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul
{display: block;}

div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Well, since the text in the menu is all links, then you need to add your text styling to the <a>. For 2nd level you'd need something like:

#menu ul ul li a{text styling rules}

That did it. Thank you so much!