Créer un menu en CSS

Bonjour,

Je suis DÉBUTANT en création d'un site web et je "maîtrise" seulement le html et le CSS. J'essai d'en créer un en suivant cet exemple: https://helpx.adobe.com/ca_fr/dreamweaver/how-to/responsive-web-design-basics.html

Voici le résultat de l'exemple:


Bon, j'ai suivi les tutoriels, mais avec mes informations dans mes menus, j'ai un petit problème. Mon mot est trop long et donc le menu "grossi":

Que dois-je faire pour remplir l'espace blanc pas le menu? Je veux grossir les autres liens pour qu'ils deviennent comme "Comptoir des Aubaines".

De plus, dans le lien EAL, j'aimerais faire un sous-menu. Mais, j'ai de la difficulté à le faire même en suivant ce tuto: http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

Lorsque je survole le lien, rien n'apparaît.

Voici mon code HTML:
(image s'ouvrant agrandie dans un nouvel onglet par la modération CCM)

Et mon code CSS:

/* CSS Document */
@charset "utf-8";

body {
margin: 0px;
color: #000;
background-image:url(images/dark_leather.png);
}

h1 {
text-align:center;
padding-top:20px;
}

#allthepage {
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 8px 8px 30px #000;
background-image:url(images/white_leather.png);
}

#eglise img {
max-width:75%;
display:block;
margin-left:auto;
margin-right:auto;
border-radius: 20px;
box-shadow: 8px 8px 30px #000;
}




a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
a:visited {
color: #FF944C;

}
a:hover, a:active, a:focus {
color: #7F3300;
text-decoration: underline;
}
#mainnav ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
list-style-type: none;
}
#mainnav a {
width: 20%;
display: block;
float: left;
text-align: center;
background-color: #4d4d4d;
color: #FFFFFF;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
background-color: #43a6cb;
text-decoration: none;
}

/* Sous-Menu */

#sousmenu li {
display:none;
}

#sousmenu:hover {
display:block;
}
#sousmenu li:hover{
float:none;
}

#sousmenu li {
position:absolute;
}



footer {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
background-color: #43a6cb;
color: #FFFFFF;
}




Merci de votre aide,

SaxGuit