Discussion :

[razily]

Bonjour je souhaiterai connaître comment on crée ce genre de menu (onglet ) http://fr.cinema.yahoo.com/video/hol...-28619256.html
avec des sous menus en lignes à l'intérieur :
si vous cliquez sur video par exemple y a la barre horizontale en dessous qui couvre les sous themes !!

moi je souhaiterai faire pareil tout indiquant que la souris passe çà affiche les sous menus

merci !!

[Emyleen]

Si tu utilise Firefox, il te suffit de faire clic droit => inspecter élément pour obtenir l'architecture de base de ce menu :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<div role="navigation" id="navigation" class="yom-mod yom-nav">
   <div class="bd" id="yui_3_3_0_1_1333370197524265">
      <div class="nav" id="yui_3_3_0_1_1333370197524264">
         <div class="nav-stack nav-0" id="yui_3_3_0_1_1333370197524263">
            <ul class="yog-grid" id="yui_3_3_0_1_1333370197524262">
               <li class="first" id="yui_3_3_0_1_133337019752483">
                  <a title="Home" href="/"><span>Accueil</span></a>
                  <div class="nav-sub-wrap" style="position: absolute; width: 114px; top: 36px;">
                     <div class="nav-sub nav-1" id="yui_3_3_0_1_133337019752486" style="right: auto; left: 0px;">
                         <div class="entries">
                            <ul id="yui_3_3_0_1_133337019752489">
                               <li class="first"><a href="http://fr.cinema.yahoo.com/box-office/"><span>Box-office</span></a><!-- teaser= --></li>
                               <li class=""><a title="À venir" href="http://fr.movies.yahoo.com/films-prochainement-en-salle.html"><span>À venir</span></a><!-- teaser= --></li>
                               <li class=""><a title="Cette semaine" href="http://fr.movies.yahoo.com/films-en-salle.html"><span>Sorties ciné</span></a><!-- teaser= --></li>
                               <li class=""><a title="Anecdotes" href="http://fr.movies.yahoo.com/anecdotes-films/"><span>Anecdotes</span></a><!-- teaser= --></li>
                               <li class=""><a href="/blogs/hollywood-insider/"><span>Hollywood Insider</span></a><!-- teaser= --></li>
                               <li class=""><a href="http://fr.cinema.yahoo.com/festival-de-cannes/"><span>Festival de Cannes 2012</span></a><!-- teaser= --></li>
                               <li class=""><a href="http://fr.cinema.yahoo.com/film/target/"><span>Target</span></a><!-- teaser= --></li>
                            </ul>
                         </div>
                      </div>
                      <div class="arrow" style="width: 114px;">
                          <em></em>
                      </div>
                      </div><!-- teaser= -->
                   </li>
                </div>
              </li>
          </ul>
      </div>
   </div>
</div>

Bon c'est un peu compliqué mais à toi de comprendre l'architecture et de la simplifier