aide Menus et sous-menus à onglets avec CSS

Tu dois mettre un background-image sur ton span et mettre après un padding pour éviter que ton titre accueil aille sur ton image.

En lisant ton code n'y aurais t-il pas une erreur tu as une balise "li" qui n'est pas fermé?

bonjour
un oublie de ma part .
comment je pourriez faire pour mettre un sous menu déroulent en dessous juste après Dernières annonces qui peux me donne le code plus css

Voilà un exemple de sous menu, http://nicolas-rivoire.fr/sousmenu/ . Tu as accès au code en faisant CTRL+U

Si ta d'autre questions n'hésite pas

bonsoir

merci pourrie-vous a intégré juste un sous menu a mon code

<div id="en-tete">
    <ul>  
      <li><a href="<?php echo osc_base_url(); ?>"><span>Accueil</span></a>
        <ul>
            <li><a href="#"> Sous menu1 </a></li>
            <li><a href="#"> Sous menu2 </a></li>
            <li><a href="#"> Sous menu3 </a></li>
        </ul>
      </li>
      <li><a href="<?php echo osc_item_post_url_in_category(); ?>"><span>Publier une annonce</span></a></li>
      <li><a href="<?php echo osc_user_login_url(); ?>"><span>Connexion</span></a></li>
      <li><a href="<?php echo osc_register_account_url(); ?>"><span>Inscription</span></a></li>
      <li><a href="04.html"><span>Dernieres annonces</span></a></li>
    </ul> 
  </div>

Voilà a quoi ça ressemble

bonsoir

Bonsoir

Y a-t-il une personne qui peux regarder mon code car quand je passe la sourie sur mon menu il bug besoin aide
Le titre Mon compte c’est ce con mais ressemblé Inscription et Connexion ou si vous avez d'autre idée

Merci

<nav>
            <ul class="Menu">                                               
                <li><a href="#"><span>Mon compte</span></a>
                   <ul>                   
                     <li><a href="<?php echo osc_register_account_url(); ?>"><span>Inscription</span></a></li>
                     <li><a href="<?php echo osc_user_login_url(); ?>"><span>Connexion</span></a></li>
                    </ul>
                </li>
                <li><a href="<?php echo osc_item_post_url_in_category(); ?>"><span>Publier une annonce</span></a></li>
                <li><a href="04.html"><span>Dernieres annonces</span></a></li>
                <li><a href="#"><span>Aide</span></a></li>                                              
                <li><a href="#">Nos offres</a>  
<ul>                   
                     <li><a href="#"><span>1</span></a></li>
                     <li><a href="#"><span>2</span></a></li>
                    </ul>
                </li>               
            </ul>
        </nav>

css

.Menu{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;
}
.Menu li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* Adding a 1px inset highlight for a more polished efect: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

    position:relative;

    float: left;
    list-style: none;
}
.Menu li:after{
    /* This creates a pseudo element inslide each LI */ 

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

    /* This will create a smooth transition for the opacity property */

    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}
/* Treating the first LI and li:after elements separately */
.Menu li:first-child{
    border-radius: 4px 0 0 4px;
}
.Menu li:first-child:after,
.Menu li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

    border-radius:4px 0 0 4px;
}
.Menu li:last-child{
    border-radius: 0 4px 4px 0;
}
/* Treating the last LI and li:after elements separately */
.Menu li:last-child:after,
.Menu li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

    border-radius:0 4px 4px 0;
}
.Menu li:hover:after,
.Menu li.selected:after,
.Menu li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}
.Menu:hover li.selected:after,
.Menu:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}
.Menu li.selected:hover:after,
.Menu li:target:hover:after{
    opacity:1 !important;
}
/* Styling the anchor elements */
.Menu li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}
.Menu a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}
ul ul li{
    float:none !important;
}
ul ul{
    padding:0;
    display:none;
    position:relative; /* updated */
    z-index:2; /* updated */
}
ul li:hover ul{
    display:block;
}
#Menu ul li ul {
 display:none;
 }
#Menu ul li:hover ul {
 display:block;
 }
#Menu li:hover ul li {
 float:none;
 } 
 #Menu li ul {
 position:absolute;
 }
 #Menu {
 height:50px;
 }

bonsoir personne a une solution merci

Nicogne t'a donné un exemple fonctionnel. Nous ne sommes pas là pour résoudre ton problème à ta place mais bien pour te donner des pistes. ;)