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?

[Nobody33]

La rifaccio daccapo, faccio prima.

Possibile soluzione:

//css
dl#menu dd {
	margin-left:41px ;
	padding:0px;
	display:block;
  list-style-type:none;

  }
a.bottone, a.bottone:visited {
  display:block; 
  width:103px; 
  height:48px; 
  background:none; 
  text-decoration:none; 
  text-align:center;
  font-weight:bold;
  color:#f00; 
  float:left;
  }
a.bottone span, a.bottone:visited span {
	
  display:block;
  width:71px; 
  height:10px; 
  border-top:8px solid ;
  border-top:hidden;
  border-left:16px solid;
  border-left:hidden;
  border-right:16px solid ;
  border-right:hidden;
  border-bottom:8px solid ; 
  border-bottom:hidden;
  margin:8px 16px 8px 16px;
  background:#4e4e4e; 
  overflow:hidden;
  }
* html a.bottone span, * html a.bottone:visited span {
  width:80px; 
  height:24px; 
  w\idth:48px; 
  he\ight:8px; 
  overflow:hidden;
  }

a.bottone:hover span {
  background:#f03;
  }
  
 //html

 <div id="menu"><dl id="menu">
  <dd>
    <a class="bottone" href="#">
    Home
        <span></span>
    </a>
  </dd>
<dd>
    <a class="bottone" href="#">
     Link 
<span></span>
    </a>
  </dd>
  <dd>
    <a class="bottone" href="#">
     Test
<span></span>
</a> 
  </dd>
  <dd>
    <a class="bottone" href="#">
       Altro
<span></span>
    </a>
  </dd>
 <dd>
    <a class="bottone" href="#">
    Contatti 
<span></span>
    </a>
  </dd>
</dl></div>

Le misure ovviamente li imposti a piacere tuo

[Vash SD]

Ti ringrazio tantissimo per l'aiuto, ma ho un paio di domande: <dd> e <dt> non sono html5? E c'è solo un problema con questo codice: che non è cross-browser :S

[Nobody33]

<dd> e <dt> non sono html5?

Vedi QUI per la risposta.

E c'è solo un problema con questo codice: che non è cross-browser :S

Ovvero?

QUI puoi testarlo.