Can't figure out CSS issue

Question

Hi - I cannot seem to figure out what I'm doing wrong.  I have a little box I am using for links.  The code for the box [.menutitle] works great [see below].  But I am trying to make it so that when you hover over the box, the background color of the box will change.  The second piece below is what I have but it will not change the color when you point your cursor over the box.
PS - I also tried putting the "a" before it [like a.menutitle:hover] but that did not work either.
Please advise.
Thanks - Deaf Guy
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#f2f2f2;
color:#000000;
width:150px;
padding:2px;
text-align:left;
font-weight:none;
/*/*/border:1px solid #000000;/* */
.menutitle:hover{
cursor:pointer;
margin-bottom: 5px;
background-color:#ececff;
color:#000000;
width:150px;
padding:2px;
text-align:left;
font-weight:none;
/*/*/border:1px solid #000000;/* */
.submenu{
margin-bottom: 0.5em;
</style>

Answer 1

On the second page example you are applying a class to an anchor tag <a> which is not in your code:
Change this:
<div class="menutitle" onclick="SwitchMenu('sub1')">&raquo; Doc Libraries</div>
to this: (note the addition of the <a></a> tag around the link)
<div class="menutitle" onclick="SwitchMenu('sub1')"><a href="#">&raquo; Doc Libraries</a></div>
And your css styles to these:
.menutitle {
background-color:#f2f2f2;
color:#000000;
width:150px;
margin: 0 0 9px 0;
text-align:left;
border:1px solid #000000;
.menutitle a {
display: block;
text-decoration: none;
padding: 2px;
color: #000;
.menutitle a:hover {
background-color:#ececff;
color:#000;