Composizione menu a tab

[Vash SD]

Premetto che peno di averne visti a palate di menu così, ma ogni qual volta che poi ne cerco uno per capire come funziona non ne trovo mai.

Vorrei realizzare un menù del genere (vedi immagine allegata), e sto cercando di realizzarlo da solo. ma purtroppo non riesco a capire come mai il tag <ul> o[*] non supporti il padding e non esegua determinati comandi. Vi riporto il codice:

Il CSS:

		div#header {}
			/*div.logo-header {float: left;}*/
			div.menu-header {background-color: #333333; border-bottom: 5px solid #686866;}
				ul#menu {margin: 0px; background-color: #333333; border-bottom: 5px solid #686866; height: 55px;}
				ul#menu li{display: inline; list-style: none; padding: 10px;}
				ul#menu li a{text-decoration: none; color: #FFFFFF; text-shadow: -1px 1px #adadad; border-left: 1px solid #5c5c5c; border-bottom: 5px solid #9b9b9b;}
				ul#menu li a:hover{border-bottom: 5px solid #bc0404;}
				
				ul#menu li.active {border-bottom: 5px solid #bc0404;}
				ul#menu li.last {border-right: 1px solid #5c5c5c;}

L'HTML:

<div id="menu-header">
	 <ul id="menu">
    	<li class="active">Home[*]Menu[*]Su di noi
        <li class="last">Contatti
	[/list]
	</div>

Il risultato è questo qua:

http://s13.postimg.org/yc1svvlfr/menu.png

Non capisco perché: non esista il concetto di padding. Se io lo volessi centrato come ho visto miliardi di volte cosa dovrei fare? Vorrei riuscire a sovrapporre i border-bottom per creare un menu decente, eppure vengono così sfasati. Consigli?