Les feuilles de style CSS de la DIV menu de navigation de remplacer l'ancien menu TABLEAU, la taille de l'élément d'émission

J'ai été prendre un certain temps ces deux dernières semaines pour mettre à jour mon code HTML/CSS de la connaissance. En conséquence, j'ai été d'apprendre comment réaliser des mise en page que j'ai déjà fait avec des tables, avec les Divisions la place.

Pour la plupart, c'est bien, mais j'ai couru dans quelques accrocs en essayant de reproduire un style de menu de navigation qui utilise le code suivant comme un tableau:

HTML:

<div class="navigation">
    <table>
        <tr>
            <td><a href="index.php">home</a></td>
            <td>&nbsp;</td>
            <td><a href="about.php">about</a></td>
            <td>&nbsp;</td>
            <td><a href="music.php">music</a></td>
            <td>&nbsp;</td>
            <td><a href="geeking.php">geeking</a></td>
            <td>&nbsp;</td>
            <td><a href="contact.php">contact</a></td>
        </tr>
    </table>
</div>

CSS:

div.navigation{
text-align: center;
color: hsla(200,50%,45%,0.6);
margin: auto;
font-family: monospace;
letter-spacing: 2px;
position: relative;
top: -13px;
margin: 20px auto 20px auto;
width: 60%;
}
.navigation table{
height: 70px;
}
th{
text-align: center;
color: hsla(180,50%,45%,0.4);
font-size: 1.1em;
}
table{
border-collapse: collapse;
margin: auto;
margin-top: 0px;
}
table,th{
border: 0px solid black;
padding: 5px;
}    
.navigation a{
text-decoration: none;
color: hsla(200,50%,45%,0.6);
background-color: transparent, white;
text-transform: lowercase;
font-size: 1.2em;
-webkit-transition: all 0.4s linear; 
-moz-transition: all 0.4s linear; 
-o-transition: all 0.4s linear; 
-ms-transition: all 0.4s linear; 
transition: all 0.4s linear;
letter-spacing: 0px;
width: 50px;
height: 100px;
}
.navigation a:hover{
color: white;
-webkit-transition: all 0.2s linear; 
-moz-transition: all 0.2s linear; 
-o-transition: all 0.2s linear; 
-ms-transition: all 0.2s linear; 
transition: all 0.2s linear;
width: auto;
height: auto;
font-size: 2em;
font-weight: bold;
letter-spacing: 2px;
text-shadow:    0 0 20px hsla(180,50%,40%,.6),
0 0 40px hsla(200,50%,45%,.8);
}

Vous pouvez afficher cette page en direct ici: http://benjaminsherwood.co.uk/index.php
Pour être clair - c'est ce comportement que je voudrais que mon menu - pour une flottait au-dessus de l'élément d'augmentation de la taille des lettres et de l'espacement et de pousser les autres éléments de gauche et de droite, mais en restant sur la même verticale de la plaine. Il est à la verticale de la plaine de la partie que je suis coincé avec.

Voici le code que j'utilise essayer et créer le même menu avec des DIVs:

HTML:

<div class="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Music</a></li>
<li><a href="">Geeking</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>

CSS:

.menu{
position: fixed;
left:0; 
right:0; 
top:0;
margin: auto;
text-transform: lowercase;
text-align: center;
}
.navigation table{
height: 70px;
}
.menu li{
list-style: none outside none;
display: inline;
}
.menu a{
text-decoration: none;
color: hsla(200,50%,45%,0.6);
font-size:  1.2em;
letter-spacing: 0px;
-webkit-transition: all 0.4s ease; 
-moz-transition: all 0.4s ease; 
-o-transition: all 0.4s ease; 
-ms-transition: all 0.4s ease; 
transition: all 0.4s ease;
}
.menu a:hover{
color: white;
font-size: 2em;
font-weight: 600;
letter-spacing: 2px;
-webkit-transition: all 0.2s ease; 
-moz-transition: all 0.2s ease; 
-o-transition: all 0.2s ease; 
-ms-transition: all 0.2s ease; 
transition: all 0.2s ease;
text-shadow:    0 0 20px hsla(180,50%,40%,.6),
0 0 40px hsla(200,50%,45%,.8);
}

Vous pouvez afficher cette page en direct ici: http://benjaminsherwood.co.uk/test.php

J'essaie de comprendre cela tout le week-end - j'ai cherché haut et bas pour trouver une solution, et appliquer les différentes méthodes de création de ce menu horizontal, mise en page, et même abouti à un ami qui est très bon avec du CSS mais, peu importe ce que j'essaie, je ne peux pas comprendre comment atteindre le DIV de mise en page se comporter de la même manière que la TABLE.

C'est presque comme si le TABLEAU de mise en page est d'appliquer les modifications à l'élément à partir du centre de la TD élément, tandis que le DIV de mise en page est de l'appliquer à partir de l'angle supérieur. En conséquence, la DIV de mise en page semble croître de seulement vers le bas, au lieu de se propager, et comme un résultat, les éléments de part et d'autre ne s'écoule pas vers la gauche et la droite sur le même plan horizontal, comme c'est le cas avec la disposition de la TABLE, mais plutôt poussé à gauche ou à droite, et aussi poussés à la baisse.

Je vais être honnête, je sais que la solution pourrait être de simplement accepter la façon dont il fonctionne différemment dans la DIV style, ou de continuer à utiliser le style de TABLEAU... mais je suis convaincu qu'il devrait être possible, et que je suis juste en manque de quelque chose.

La TABLE de style utilisée pour faire quelque chose de similaire, jusqu'à ce que j'ai défini:

.navigation table{
height: 70px;
}

après quoi, il a commencé à se comporter. Je ne peux pas comprendre si vous faites le même en DIV-mise en page quelque part résoudre le problème... j'ai essayé de réglage de la hauteur des différents éléments, mais rien ne semble faire une différence.

Désolé pour le super-longue question. J'ai vraiment évité d'avoir à poser une question à moi-même, mais j'ai vraiment juste frappé un mur de briques.