Problème avec mon menu (navbar) de margin ou padding

Bonjour,

Que fait DoHover ?
Il ne s'agirai pas d'un 'selected' au niveau PHP ?
L'affichage doit-il se faire au passage de la souris (li:hover) ?

Pourquoi utiliser un display "table" pour un menu ??

Sinon même demande que Green69, merci de poster le html généré (copier-coller depuis le code source mis à disposition par le navigateur).
Pour pouvoir t'aider il faut que l'on voit se qui est généré par DoHover().

Bon vite fait :

.navbar{
    width:100%;
    /*display:table;*/
    float:left;
    background: -moz-linear-gradient(top, rgba(103,185,239,1) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,185,239,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* W3C */
    border-radius:40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 
                0 15px 15px rgba(0, 0, 0, .15);
}

.navbar ul{
  height:62px;
  margin: 0;
  clear:both;
}

.navbar li {
  position: relative;  
  list-style:none;
  /*display: table-cell;*/
  display: inline-block;
  clear:both;
}

.navbar li a {
  position: relative;
  display: inline-block;
  vertical-align:center;
  text-decoration:none;
  color: #3d3d3d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  /*font-size:2em;*/
  padding:22px 25px 22px 25px;
}
.navbar li a:hover {
  background-color: blue;
  color: white;
  cursor: pointer;
}

De plus, le <span> me semble inutile ;)

Merci beaucoup pour vos réponses ! Bon en fait, je vous dis honnêtement, ce n'est pas moi qui ai créer la partie PHP , je suppose que cela sert à garder le même Header ou corps de page et que juste le contenu change ?

Voici le code généré :

<menu class="Navigation">
<li>
<a id="accueil_on" href="accueil.html">
<span class="hidden">Accueil</span>
</a>
</li>
<li>
<a id="produits" href="produits.html">
<span class="hidden">Produits</span>
</a>
</li>
<li>
<a id="services" href="services.html">
<span class="hidden">Services</span>
</a>
</li>
<li>
<a id="localisation" href="localisation.html">
<span class="hidden">Localisation</span>
</a>
</li>
<li>
<a id="financement-impots" href="financement-impots.html">
<span class="hidden">Financement et Impots</span>
</a>
</li>
<li>
<a id="contact" href="contact.html">
<span class="hidden">Contact</span>
</a>
</li>
</menu>

Je vais tenter la solution de Green68.

ça me rassure un peu que mon CSS ne soit pas trop anarchique lol (j'suis une newbie pour l'instant ...)

Pour le Display:table-cell, j'avais tout bêtement suivis un tuto qui disait :
"De cette façon, chaque élément de liste mesure automatiquement 1/5e de la taille de son parent"...

On m'a appris avec le display:inline-block, mais je me suis dis que peut-être, cette méthode était plus adaptée ?

Ah et aussi, oui, par rapport à ma capture d'écran, j'aimerai que le bloc bleu se créer en hover (j'avais aussi envie de tenter qu'il dépasse un peu en haut et en bas mais bon... j'ai pas encore le niveau je pense lol).

Voici TOUT mon CSS, je n'avais copié qu'une partie pffffff -_- , I'm a big boulette lol

.navbar{
    width:100%;
    /*display:table;*/
    float:left;
    background: -moz-linear-gradient(top, rgba(103,185,239,1) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,185,239,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* W3C */
    border-radius:40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 
                0 15px 15px rgba(0, 0, 0, .15);
}

.navbarul{
        height:30px;
        clear:both;
        position:relative;
}

.navbar li {
    list-style:none;
    /*display: table-cell;*/
    display:inline-block;
    position:relative;
    padding:0px 25px 0px 25px;
    clear:both;
    }

.navbar li a {
    position:relative;
    display:inline-block;
    vertical-align:center;
    text-decoration:none;
    color:#3d3d3d;
    font-size:2em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);

}

ul li:first-child a{ border-radius: 3px 0 0 3px; } 

ul li:last-child a{ border-radius: 0 3px 3px 0; }

ul li:hover{
    height:40px;
    background: rgb(77,123,221); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(77,123,221,1) 0%, rgba(36,55,181,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(77,123,221,1)), color-stop(100%,rgba(36,55,181,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* W3C */
    padding:0px 30px 8px 30px;
    transition:padding 0.3s;
    }

ul li a:hover{

    color:white;
    transition:color 0.5s;
}

ul li:focus {
             background: rgba(255,255,255,.2); 
             box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
                        0 -1px 0 hsl(210, 100%, 42%) inset, 
                        0 -2px 0 hsl(210, 100%, 48%) inset, 
                        0 -3px 0 hsl(210, 100%, 54%) inset, 
                        0 -4px 0 hsl(210, 100%, 60%) inset, 
                        0 -5px 0 hsl(210, 100%, 70%) inset; 
            padding: 8px 25px 17px 25px;
    }

Commence par fixer le height de ton élément ".navbar" (50px par exemple, c'est à toi de voir) et attribue-lui la propriété "box-sizing: content-box;", ensuite il faudrait que les enfants "ul", "li", "a" et "span" de ton élément ".navbar" héritent de cette hauteur ("height: inherit;").

Tu peux ajouter un "line-height: 48px;" à tes éléments "li" afin d'aligner verticalement ton texte, mais c'est un détail ;)

Aussi je vois que tu fixes une hauteur à l'élément "li" lors du hover, ça sert à quoi ? C'est peut-être de là que vient le soucis.

Essaye comme ça et dis-moi si ça fonctionne mieux ?

J'espère avoir pu t'aider ;)

@Geralterego as-tu testé mon bout de CSS ?

Bonjour à tous,

désolée ne te pas avoir donné de nouvelle... Des fois je m'embrouille toute seule et je me complique la vie...
Après moulte essais et en m'inspirant de vos solutions , j'ai fais des test et j'y suis arrivé !

Par contre j'ai un soucis de liste qui retourne à la ligne lorsque l'écran devient trop exigü ...

Voici mon code

.navbardiv{
        width:100%;
        height:40px;
        /* background: rgb(84,183,82); /* Old browsers */
        /*background: -moz-linear-gradient(top, rgba(84,183,82,1) 0%, rgba(73,145,68,1) 100%); /* FF3.6+ */
        /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(84,183,82,1)), color-stop(100%,rgba(73,145,68,1))); /* Chrome,Safari4+ */
        /*background: -webkit-linear-gradient(top, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* Chrome10+,Safari5.1+ */
        /*background: -o-linear-gradient(top, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* Opera 11.10+ */
        /*background: -ms-linear-gradient(top, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* IE10+ */
        /*background: linear-gradient(to bottom, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* W3C */ 
        border-radius:0 0 20px 20px;
        clear:both;
        display:inline-block;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 
                    0 15px 15px rgba(0, 0, 0, .15);
        background-color:#575957;

}

.navbarmenu{
        width:99%;
        height:40px;
        display:block;
        clear:both;
        float:left;
        position:absolute;
        margin-top:2px;
        }

.navbarmenu li {
        display:table-cell;
        float:left;
        text-align:justify;
        margin-top:0;

}

.navbarmenu li a{
        color:#5cda5c;
        text-decoration:none;
        font-size:2em;
        margin-top:0;
        padding:4px 40px 9px 15px;
        display:inline-block;

}
.navbarmenu li a:hover {
        color:#ffffff;
        transition:color 1s easy-in;
        margin-top:0;
        padding:4px 40px 9px 30px;
        transition:padding 1s;
        background-color:#5ae273;
        box-shadow:2px 0px black 10px inset;
}

C'est tout à fait normal, il te faut utiliser les media-queries afin d'adapter tes éléments en fonction de la taille de l'écran.
Par exemple :

@media screen and (max-width: 1023px){
// ton css ici
}

Le code que tu mettra s'appliquera uniquement sur les devices dont la résolution est inférieure à 1024px.
[https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries]()

Merci Cyprien... je pense qu'il va falloir que je me plonge dans l'apprentissage et la pratique du responsive (je n'ai que des notions...).
En plus je n'ai pas vraiment de moyen de tester sur un écran 17 pouces, 22 pouces etc... (et je suis encore aux test des versions tablette et smartphone...)

Je t'en prie. Il y a un tuto sympa sur le "mobile first" sur Grafikart si tu veux: [http://www.grafikart.fr/tutoriels/html-css/responsive-mobile-first-550]()
Regarde aussi de ce côté là pour ton menu sur small devices: [http://www.grafikart.fr/tutoriels/html-css/menu-hamburger-responsive-512]()

Pour le test des résolutions, tu peux commencer par utiliser l'émulateur de l'inspecteur de Chrome, ou encore l'excellente extension pour Chrome "Viewport Resizer" ;)