Vertical Menu

My client wanted a vertical menu in the logo area. I accomplished this with CSS, but now the hover doesn’t work very well. The cursor needs to be to the right of the menu items for them to change colors and activate. Any suggestions for making the navigation work more smoothly with this setup?

Here’s the CSS I used:

/***VERTICAL NAV POSITION***/
#main-nav {
position: absolute !important;
top: -150px;
right: 40px;
display: block;
text-align: right;
float: inherit;
}

/***NAV HOVER COLOR***/
#main-nav a:hover span {
color: #3d9be9 !important;
}