Overriding styles upon :hover - css

Question

I'm creating a Inbox in which there will me a asp menu on the side and Inbox on the center. I need to change the font color to red and make it bold when I see a new row from the database. I have used adding on the menu item.
If Not Hovered it looks like this.
If Hovered It Has to look like this.
But the problem is that when I hover on the text it looks like the image shown above, but if I hover slightly on the top or bottom of the menuItenm (Inside the Menu Item but not on Text), Then This looks like this.
CSS used For Menu Item.
.Menu ul li a {
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;}
.Menu ul li a:hover{
background-image: none;
color: white;
background: #424242;}
Here is the code I used to change The color and set the font to bold From server side.
Menu1.Items[0].Text = "<div class='inboxno' >" + "Inbox (" + (i + 1) + ")" + "</div>";
Here is the CSS class of inbox.
.inboxno{
background-image: none;
color: Red;
font-weight:bold;}
.inboxno:hover{
background-image: none;
color: white;
background: #424242;
font-weight:bold;}
I think I understand the problem. It is, that a <DIV> is created around the inbox Text inside the Menu Item and It has the Css inboxno. But the Menu Item has padding and When I place mouse on the padding Area then the inboxno:hover class is not being applied to the Div.
I think one of the solutions to this problem is, if I could access the .Menu ul li a class from .inboxno:hover class I will remove the Padding Property and Set the Same padding property in the .inboxno:hover class.
But I don't know how to access the .Menu ul li a class from .inboxno:hover class.
Can you Help me??

Answer 1

Not sure if you're just asking about the hover or not but try doing
.Menu ul li:hover a {
background-image: none;
color: white;
background: #424242;
}