28172 sujets

CSS et mise en forme, CSS3

Probleme avec mon menu deroulant

bonjour à tous,

voila j'ai un menu déroulant que j'avais créer qui était bien en place et lors que j'ai voulu l'appliquer a l'ensemble du blog et la opss c pas bon et je comprend pas ce qui a sauter ?

en gros c un menu horizontale + déroulant sur chaque bock.

le site c http://leblogduzouk.net

en faite je pense qu'il y juste un petit bug un ligen ou un truc qui a été zapper lors de la copie?

pourquoi le déroulement des colonnes ne marche plus?

merci de votre aide

julien

le code html:


[#green]<!-- menu cliquable -->
        </td>
</tr>
<tr style="text-align: center;">
<td colspan="9" align="left">
<div id="conteneur-menu">
<div id="menu">
              <dl>
                <dt>
                  <a href="http://leblogduzouk.net">ACCEUIL</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://leblogduzouk.net">ACCEUIL</a>
                    </li>
<li>
                      <a href="http://www.over-blog.com/profil/blogueur-3848.html">PRESENTATION</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-contact-blog-du-zouk-42425755.html">CONTACTS</a>
                    </li>
<li>
                      <a href="http://www.facebook.com/leblogduzouk">FACEBOOK</a>
                    </li>
<li>
                      <a href="http://www.myspace.com/leblogduzouk">MYSPACE</a>
                    </li>
<li>
                      <a href="http://twitter.com/leblogduzouk">TWITTER</a>
                    </li>
<li>
                      <a href="http://www.youtube.com/user/leblogduzouk2">Chaine Youtube</a>
                    </li>
<li>
                      <a>Chaine DailyMotion</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-740294.html">MUSIQUES</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740294.html">ZOUK LOVE</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740298.html">COMPAS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740357.html">CABO-KIZOMBA</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740350.html">ZOUK RETRO</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740297.html">AFRO-COUPE DECALE</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-740296.html">REGGAE-DANCEHALL</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-751164.html">SALSA-REGGAETON</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-750748.html">HipHop Rnb</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-10720965.html">Antilles Tradition</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-11488900.html">Electropical-Club</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-10011698.html">FUTURES SORTIES</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-750784.html">CLIPS</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-750784.html">CLIPS ZOUK</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-750784.html">AUTRES</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-29254392.html">LISTE DES CLIPS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-video-wall-dailymotion-du-blog-du-zouk-55551198.html">Wall DailyMotion</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-jukebox-by-dailymotion-du-blog-du-zouk-55551854.html">JukeBox DailyMotion</a>
                    </li>
<li>
                      <a href="http://www.youtube.com/user/leblogduzouk">CLIP ELECTRO</a>
                    </li>
<li>
                      <a href="http://www.youtube.com/user/leblogduzouk">CLIP DIVERS</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-4000682.html">SOIREES</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-4000682.html">SOIREES</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-28763025.html">LISTES DES SOIREES</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-4000682.html">CONCERTS</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/categorie-4000345.html">INTERVIEWS</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/categorie-4000345.html">LIRE LES INTERVIEWS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-12298609.html">LISTE DES INTERVIEWS</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-12298609.html">INTERVIEWS VIDEOS</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/pages/HIT_DU_BLOG_DU_ZOUK-3312342.html">HIT TROPICALE</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://www.leblogduzouk.net/pages/HIT_DU_BLOG_DU_ZOUK-3312342.html">TOP 50: SINGLE ZOUK</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-29129980.html">EXTRAITS EN ECOUTE</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://www.leblogduzouk.net/article-13141854.html">LIENS</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://leforumduzouk.net">Le Forum du Zouk</a>
                    </li>
<li>
                      <a href="http://www.antilles-mizik.com/boutique/index.php?ref=2">Antilles Mizik</a>
                    </li>
<li>
                      <a href="http://leblogduzouk.ssbstore.com/">Ssbstore</a>
                    </li>
<li>
                      <a href="http://www.leblogduzouk.net/article-13141854.html">Liens</a>
                    </li>
</ul>
</dd>
              </dl>
              <dl>
                <dt>
                  <a href="http://ann.over-blog.com/blog-newsletter.php?ref=387414">NEWLETTER</a>
                </dt>
                <dd>
                  
<ul>
<li>
                      <a href="http://ann.over-blog.com/blog-newsletter.php?ref=387414">Inscription</a>
                    </li>
<li>
                      <a href="http://ann.over-blog.com/blog-contact.php?ref=387414">Formulaire Contact</a>
                    </li>
</ul>
</dd>
              </dl>
            </div>
</div>
</td>
</tr>
<tr>[/#]


et le css corespondant c'est :

[#orange]#conteneur-menu{
        z-index: 100;
        background-color:#B9121B;
        height:0px;
        color:#000000;
        position:relative;
        text-transform : uppercase; 
	}	
#menu{
        margin-left: auto; 
        margin-right: auto; 
        width:944px;        
        height:30px;
        background-color:#046380;
        color:#000000;
        font-weight : bold; /* on met le texte en gras */
        font-size : 14px;
        font-family : Times New Roman; /* on utilise Arial, c'est plus beau ^^ */
	position:relative;
        text-align: left; /* on rétablit l'alignement normal du texte */ 
        }
      
dl{
	height:28px;
	margin:0px; 
	padding:0px;
	display:block;
	float:left;
	}
dt{
	width:114px;
	display:block;
	height:28px;
	color:#000000;
	line-height:28px;
	text-align:center;
	border:groove 2px #01B0F0;
	cursor:pointer;
	}	
dd{
	height:28px;
	width:114px;
	display:block;
	margin:0;
	padding:0;
		}	
dd ul{
        background-color:#046380;
	width:114px;
	margin:0px;
	padding:0px;
	text-align:center;
	list-style:none;
	}
dd ul li{
	display:block;
	margin:0px;
	padding:0px;
	}
dd ul li a{
        background-color:#046380;
	width:114px;
	color:#ffffff;
	text-decoration:none;
	line-height:20px;
	border:groove 2px #01B0F0;
	display:block;
	}
dl      hover dd{
	display:block;
	}
dd ul li a:hover{
	background-color:#000000;
	color:#000000;
	}
dl dd{
	display:none;
	}
#cl_0_0 {overflow:visible;}/*permet à ce que les sous-menus puissent dépasser la celulle, ici la colonne article*/
[/#]

Modifié par leblogduzouk (30 Aug 2010 - 17:53)
Bonjour...

Je vais faire mon modérateur Smiley smile

Il y a certaines règles à respecter sur ces forums...

On dit bonjour... et on encadre le code avec les bonnes balises pour que ça soit lisible Smiley smile

tu peux éditer ton message très facilement pour le rendre correct Smiley cligne
voile desolé... ou je je n'assure pas...

ben sur over blog di y a du java qui passe mais ce menu est fait sans java si je me trompe pas...

j'en ai refait un avec 123menu en java qui passe nikel:

http://sd-4.archive-host.com/membres/up/84152206344167997/menu_blog_du_zouk.swf

mais lorsque je le met en faite les block déroulant passent derrière les articles... donc je suis reparti pour modifier le précèdent.

mais avant que je place ça sur les articles et accueil ça passait bien ... je comprend pas...
bon j’avais 5 minutes à tuer j'ai regardé ton code...

t'as juste une erreur...

à la place de cette ligne :

dl      hover dd{


écris juste c'est tout con Smiley cligne 

dl:hover dd{


et pour moi ça fonctionne Smiley smile
yes ça marche un gros big up... en faite faut pas mettre espace entre dl:?

d'ailleur c quoi la focntion dl?

je pige pas trop je tatouilles les codes et j'aimerai vraiment faire un beau truc...
alors pour te répondre...

déjà jamais d'espace avec les pseudos classes de type :hover etc

et dl c'est une liste défini tout simplement (un peu comme UL)
Heyoan a écrit :
Pas tout à fait : l'élément DL introduit une liste de définitions et donc n'a rien à faire dans ce menu. Smiley cligne


Et pourtant, il y a quelques temps, il me semble qu'on avait des exemples de menu utilisant des listes de définition sur le site AlsaCréations Smiley smile . On avait le titre du menu dans le dt et une liste de liens dans le dd.

Il doit me rester quelques menus qui respectaient cette idée de l'époque. Mais maintenant, j'évite...
Sujet clos
Aller à