Background color on hover & padding - html

Question

I'm having trouble with having a background color on hover, on a logo and also padding around some images.
For the background-color, it's for the logo that you see on the navigation bar on the left that is CAUL/CBUA. Its' hover state switches to this image and the background on hover should fill the whole block just like the links beside it.
For the padding of the images, it's on the same navigation bar, to the right. They are the social icons I'm sure it's not hard to see where the padding should be.
Here's the link to what I have so far. You can see the navigation bar here.
And here's my CSS:
/* Navigation bar */
#navi {
height: 40px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
margin: 0 0 20px 0;
}
#navi a:hover {
background: white;
color: #1e416f;
}
.logo {
margin: 5px;
padding: 0;
float: left;
}
.logo a {
float: left;
margin: 2px 10px;
width: 36px;
height: 26px;
background: url(/imgs/navi/caul_white_nav.png) left top no-repeat;
text-indent: -9999px;
}
.logo a:hover {
background: url(/imgs/navi-hover/caul_blue_nav.png) left top no-repeat;
}
#primary-nav, #tools-nav {
list-style: none;
margin: 0;
padding: 0;
}
#primary-nav li, #primary-nav a,
#tools-nav li, #tools-nav a { float: left; }
#primary-nav a, #tools-nav a {
color: white;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid white;
line-height: 40px;
}
#primary-nav li:first-child a, #tools-nav li:first-child a {
border-left: 1px solid white;
}
#tools-nav {
float: right;
}
#tools-nav .icon a {
text-indent: -9999px;
}
#tools-nav .email a {
background: url(/imgs/navi/mail.png) no-repeat;
width: 20px;
}
#tools-nav .email a:hover {
background: url(/imgs/navi-hover/hover_mail.png) no-repeat;
width: 20px;
}
#tools-nav .twitter a {
background: url(/imgs/navi/twitter.png) no-repeat;
width: 20px;
}
#tools-nav .twitter a:hover {
background: url(/imgs/navi-hover/hover-twitter.png) no-repeat;
width: 20px;
}
#tools-nav .search a {
background: url(/imgs/navi/search.png) no-repeat;
width: 20px;
}
#tools-nav .search a:hover {
background: url(/imgs/navi-hover/hover_search.png) no-repeat;
width: 20px;
}
HTML:
<!-- NAVIGATION -->
<div id="navi">
<h1 class="logo">CAUL/CBUA</h1>
<ul id="primary-nav">
<li>Directories</li>
<li>Committees</li>
<li>Resources</li>
<li>About</li>
</ul>
<ul id="tools-nav">
<li class="login">Log In</li>
<li class="email icon">Email</li>
<li class="twitter icon">Twitter</li>
<li class="search icon">Search</li>
</ul>
</div>

Answer 1

May be this will help someone:
.menuItem:hover
and
.menuItem :hover
is not the same, take care!

Answer 2

try this method on active and hover. (background position center center).
#tools-nav .email a {
background: url("/imgs/navi/mail.png") no-repeat scroll center center transparent;
width: 20px;
}

Answer 3

Try this:
#navi.logo {
margin: 5px;
padding: 0;
float: left;
}
#navi .logo a {
float: left;
margin: 2px 10px;
width: 36px;
height: 26px;
background: url(/imgs/navi/caul_white_nav.png) left top no-repeat;
text-indent: -9999px;
}
#navi .logo a:hover {
background: url(/imgs/navi-hover/caul_blue_nav.png) left top no-repeat;
}

Answer 4

Your selector are being overwritten do to CSS Selector scope/order. The more specific overwrites those that are more general, in this case, #navi a:hover is overwriting, .logo a:hover making your hover affect not work. the property you are overwriting is background change it to background-color: white; and you'll be fine