Menu CSS déroulant

Petite MAJ :

Le 1er menu fonctionne ( Accueil ), j'avais oublié les margin et padding 0 sur li ul.
Mais ça n'est pas fonctionnel sur les autres menus. tous les autres, liens ou pas. le curseur doit se placer au dessus pour afficher les sous menus, et le tout disparaît lorsque l'on tenter de s'y rendre.

Utilise des class au lieux d'utiliser que des balises pour identifier dans ton CSS. Car pour ça:

.menu li {
    display: block;
    height: 40px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    cursor: pointer!important;
    width: 150px;
}

Ça s'applique à la fois au li comme celui qui contient la span Accueil mais aussi à ceux d'en dessous, donc des li comme "Notre histoire"

Sinon tu as d'autres problèmes, comme des balises <a> non fermer dans ton sous-menu, plusieurs styles pour la même classe (.menu li)

Je te propose cette solution:

.menu .menu-item {
    cursor: pointer;
    color: #fff;
    display: block;
    float: left;
    line-height: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
    height: 40px;
    width: 150px;
}
.menu .menu-item .sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.menu .menu-item:hover .sub-menu {
    display: block;
}
.menu .menu-item .sub-menu a {
    color: #fff;
    display: block;
    line-height: 30px;
    text-decoration: none;
    height: 30px;
}
.menu .menu-item .sub-menu a:hover {
    background: #333;
    color: #FF0000;
}

<ul class="menu">
    <li class="menu-item">
        <a href="#"><span>Accueil</span></a>
        <ul class="sub-menu">
            <li><a href="#"><span>Sous-menu 1</span></a></li>
            <li><a href="#"><span>Sous-menu 2</span></a></li>
            <li><a href="#"><span>Sous-menu 3</span></a></li>
        </ul>
    </li>
    <li class="menu-item">
        <span>Divers</span>
        <ul class="sub-menu">
            <li><a href="#"><span>Sous-menu 1</span></a></li>
            <li><a href="#"><span>Sous-menu 2</span></a></li>
            <li><a href="#"><span>Sous-menu 3</span></a></li>
        </ul>
    </li>
</ul>

Bonjour et merci nairolf.

Alors voilà, le truc, c'est que c'est le menu Joomla. D'autant que je puisse le voir, c'est merdique, et je ne trouve aucune possibilité pour changer le style de menu ( si je veux un menu en dd dt dl, si je veux donner des id ou des class... ). Je n'ai absolument aucune idée d'où ça se trouve. Je vois du xml, ce qui ne m'arrange pas, je n'y connais rien. :(

Du coup, j'ai tenté de me débrouiller avec ce que j'avais.

Hum oui c'est sûr que là... sinon il y a toujours les sélecteurs du type ".menu > li" pour modifier que les enfants direct.

Et moi non plus je n'ai rien compris à leur système.

Il faut que tu augmentes la portée du l'élément hover pour un li tu peux mettre un padding ou bien mettre en display:block; et un margin si tu as bien un float:left; pour chaque li du menu. Pour Joomla j'ai pas eu l'occasion de l'utiliser mais j'ai déjà vu comment il était construit avec pleins de fichiers css éparpillés un peu partout ouvre la console de développement de Firefox pour retrouver où se situent les css.

Merci pour vos réponses, j'ai déjà qq éléments, je vais tenter de faire avec tout ça. J'ai aussi qq éléments sur joomla ( c'est vraiment vraiment merdique...mais bon passons ^^ )

Xtr3me, j'ai déjà placé un display block sur mes li, et j'ai un margin et padding 0 pour éviter toute marge incongrue, je comprends pas trop comment tu veux que j'augmente la portée du hover.

Pas trop le temps de te répondre clairement mais va voir le site kinapa que j'ai fait j'ai mis en place un menu déroulant. Il faut soit que tu mettes un padding sur le menu déroulé ou soit sur l'élément qui aura la propriété hover ainsi les deux se superposeront de près et le menu ne disparaîtra plus. Le css de kinapa t'en montrera plus.

essai ça :

.menu li{position:relative;}

et tes ul de sous menu en

.menu ul{position:absolute;top:40px;left:0}

cela devrait fonctionner avec le css que tu as ;)

En fait tu le forces en display block avec un height à 40px du coup lorsque ta souris va dans le ul le navigateur interprête ton css et pour lui le li:hover ne fait que 40px et considèrent que tu n'es plus dans le li

change également ceci :

.menu li:hover ul li {
    display: block;
}
.menu li ul li {
    display: none;
}

en

.menu li:hover ul {
    display: block;
}
.menu li ul{
    display: none;
}

tu peux même mettre un overflow:hidden à tout tes ul pour forcer leur contenu ;)

Merci pour ces solutions, 2b3ez, j'avais fini par arriver à peu près à ça.
il reste 2-3 détails à peaufiner et ça sera parfait :)

Voilà, tout me parait fonctionnel, il ne me reste plus qu'à faire une transitionY du sous menu ( je vais peut-être lutter aussi là dessus mais bon, au pire je posterai un nouveau sujet ^^ )

Merci pour votre aide à tous !

.menu .menu-item .sub-menu a {
    color: #fff;
    display: block;
    line-height: 30px;
    text-decoration: none;
    height: 30px;
}

Tu mets la transition dans ce bout de code là par contre c'est pas top l'utilisation d'autant de classe alors qu'en mettant .sub-menu a tu aurais exactement la même chose ;) . Tu ne fais que ralentir l'affichage du css en y rajoutant des caractères inutiles.