Hello a tous,
Voici mon problème : J'ai un menu horizontal centrer avec 7 cases "Home/World/General Statistics/News/Partner/Contacts/About us". Je veux qu'au survole de "World" il y ai un sous menu qui apparaisse en dessous de ce World. Jusqu'ici rien de surprenant. Mais contre toute attente (j'aime instaurer du suspense dans mes sujets ) j'arrive pas ! Le html est je pense bon, le css quand je survole pas World cache le #sousmenu, ce qui est normal, mais quand je survole World, rien ne change... Voici mes codes :
http://azledev.net84.net/slider.html
Need help, c'est la première fois que j'essaye un menu un peu complexe dans ce genre !
http://azledev.net84.net/slider.html
Modifié par azledev (05 Dec 2011 - 18:41)
Voici mon problème : J'ai un menu horizontal centrer avec 7 cases "Home/World/General Statistics/News/Partner/Contacts/About us". Je veux qu'au survole de "World" il y ai un sous menu qui apparaisse en dessous de ce World. Jusqu'ici rien de surprenant. Mais contre toute attente (j'aime instaurer du suspense dans mes sujets ) j'arrive pas ! Le html est je pense bon, le css quand je survole pas World cache le #sousmenu, ce qui est normal, mais quand je survole World, rien ne change... Voici mes codes :
http://azledev.net84.net/slider.html
<div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">World</a></li>
<ul id="sousmenu">
<li><a href="/mondes/ALPHA/">FR1 Alpha</a></li>
<li><a href="/mondes/BETA/">FR2 Béta</a></li>
<li><a href="/mondes/GAMMA/">FR3 Gamma</a></li>
<li><a href="/mondes/DELTA/">FR4 Delta</a></li>
<li><a href="/mondes/EPSILON/">FR5 Epsilon</a></li>
<li><a href="/mondes/ZETA/">FR6 Zeta</a></li>
<li><a href="/mondes/ETA/">FR7 Eta</a></li>
<li><a href="/mondes/THETA/">FR8 Théta</a></li>
<li><a href="/mondes/IOTA/">FR9 Iota</a></li>
<li><a href="/mondes/KAPPA/">FR10 Kappa</a></li>
<li><a href="/mondes/LAMBDA/">FR11 Lambda</a></li>
<li><a href="/mondes/MU/">FR12 Mu</a></li>
<li><a href="/mondes/NU/">FR13 Nu</a></li>
<li><a href="/mondes/XO/">FR14 Xi</a></li>
<li><a href="/mondes/OMICRON/">FR15 Omicron</a></li>
<li><a href="/mondes/PI/">FR16 Pi</a></li>
<li><a href="/mondes/RHO/">FR17 Rho</a></li>
<li><a href="/mondes/SIGMA/">FR18 Sigma</a></li>
<li><a href="/mondes/TAU/">FR19 Tau</a></li>
<li><a href="/mondes/UPSILON/">FR20 Upsilon</a></li>
<li><a href="/mondes/PHI/">FR21 Phi</a></li>
<li><a href="/mondes/CHI/">FR22 Chi</a></li>
<li><a href="/mondes/PSI/">FR23 Psi</a></li>
<li><a href="/mondes/OMEGA/">FR24 Omega</a></li>
<li><a href="/mondes/ATHENES/">FR25 Athènes</a></li>
<li><a href="/mondes/BYZANCE/">FR26 Byzance</a></li>
<li><a href="/mondes/CORINTHE/">FR27 Corinthe</a></li>
<li><a href="/mondes/DELPHES/">FR28 Delphes</a></li>
</ul>
<li><a href="#">General Statistics</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Partner</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About us</a></li>
</ul>
#menu {
background: #E70739;
margin: 5px 0px;
padding: 0px;
height: 50px;
text-align: center; /*centre les menus */
}
#menu li a {
position: relative;
top: 10px;
vertical-align: middle;
font-family: 'ClementePDacExtraLight', sans-serif;
text-decoration: none;
color: #220030;
}
#menu li {
display: inline-block; /* Aligne les <li> cote a cote */
padding: 0px;
list-style-type: none;
width: 150px;
height: 50px;
font-size: 1.2em;
}
#menu li:hover{
background: #B09F91;
border-radius: 12px;
}
#sousmenu {
display:none; /* cache le sous menu */
}
#menu li:hover #sousmenu {
display:block; /* Menu apparais quand on survole le <li> "World" */
}
Need help, c'est la première fois que j'essaye un menu un peu complexe dans ce genre !
http://azledev.net84.net/slider.html
Modifié par azledev (05 Dec 2011 - 18:41)