Menu customization

I would like to customize the graphics of the menu. This is the website I'm building: www.fabricfoto.it/testcatchevolution I've used this css code for make a bottom line on hover

#header-menu ul.menu li {
	border-bottom: thick solid #31246e;
}
#header-menu ul.menu li:hover > a,
#header-menu ul.menu a:focus {
	background: #253f80;
}

#header-menu ul.menu li:hover {
	border-bottom: thick solid #00a5e9;
}

I had to use the "trick" of a bottom line with the same color of the background (31246e) because the border is outside but I would like to have the bottom line inside the menu and don't use this trick Also I wish to have the same effect I have in hover in the active open page. It's possible to reduce the blank space between the menu elements? I don't know if I explain it good, my english is very poor.