Menu visible sur smartphone

Bonjour
je suis en train de modifier mon site qui tourne sur le CMS wordpress. J'ai une page d'accueil statique avec un menu spécifique que je viens de finir le codage. Il ne me reste plus que les couleurs à faire.

J'ai testé mon code sur les navigateur chrome, firefox et IE, il marche parfaitement bien et s'affiche correctement. Par contre quand j'ai voulu montrer mon site à un ami sur mon iphone le menu par en cacahouètte...

Il s'affiche pas de la même façon et pourtant j'utilise chrome, même safari bug...

Du coup j’aimerai savoir si y a un moyen simple pour adapter ce menu sur tous les écrans?

Voici le lien du site :

www.dungeon-rpg.com

Voici le code html :

 <link rel="stylesheet" type="text/css" href="menu.css" />

<div id="menu">
<ul id="menu">

<li>

<a class="sony"></a>

<ul class="menuderoulant">

<li><td>	
<a href="http://dungeon-rpg.com/?page_id=326">Playstation</a>
<a href="http://dungeon-rpg.com/playstation-2/">Playstation 2</a>
<a href="http://dungeon-rpg.com/playstation-3/">Playstation 3</a>
<a href="http://dungeon-rpg.com/ps-vita/">PS vita</a>
<a href="http://dungeon-rpg.com/psp/">PSP</a>
</td></li>
</ul>

</li>

<li>

<a class="sega"></a>

<ul class="menuderoulant2">
<li><td>
<a href="http://dungeon-rpg.com/dreamcast/">Dreamcast</a>
<a href="http://dungeon-rpg.com/megadrive/">Megadrive</a>
<a href="http://dungeon-rpg.com/saturn/">Saturn</a>
</td></li>

</ul>

</li>

<li>

<a class="nintendo"></a>

<ul class="menuderoulant3">

<li><td>	
<a href="http://dungeon-rpg.com/game-boy/">Gameboy</a>
<a href="http://dungeon-rpg.com/game-boy-advance/">Gameboy advance</a>
<a href="http://dungeon-rpg.com/280-2/">Gameboy color</a>
<a href="http://dungeon-rpg.com/gamecube/">Gamecube</a>
<a href="http://dungeon-rpg.com/nintendo-3ds/">Nintendo 3DS</a></td></li>
<li><td class="menu">
<a href="http://dungeon-rpg.com/nintendo-64/">Nintendo 64</a>
<a href="http://dungeon-rpg.com/ds/">Nintendo DS</a>
<a href="http://dungeon-rpg.com/nes/">Nintendo NES</a>
<a href="http://dungeon-rpg.com/super-nintendo/">Super Nintendo</a>
<a href="http://dungeon-rpg.com/wii/">Wii</a></td></li>
<li><td class="menu">
<a href="http://dungeon-rpg.com/wii-u/">Wii U</a>
</td></li>
</ul>

</li>


<li>

<a class="divers"></a>

<ul class="menuderoulant4">

<li><td>
<a href="http://dungeon-rpg.com/cd-i-2/">CD-i</a>
<a href="http://dungeon-rpg.com/n-gage/">N-Gage</a>
<a href="http://dungeon-rpg.com/multi-supports/">Multi supports</a>
<a href="http://dungeon-rpg.com/pc-windows/">PC windows</a>
<a href="http://dungeon-rpg.com/wonderswan/">Wonderswan</a>
<a href="http://dungeon-rpg.com/374-2/">Xbox</a>
<a href="http://dungeon-rpg.com/xbox-360/">Xbox 360</a>
</td></li>

</ul>

</li>
</ul>
</div>

et le code CSS

div#menu {
 font: 11px verdana, sans-serif;
 margin: 0 ;
 padding: 0;
 height: 300px;
 width: 720 px
}

#menu                      
{
	width:520px;        
	height: auto;     
	list-style-type: none; 
	margin: 0 auto;        
	padding: 0;            
	border: 0;      
	
	}
#menu > li                
{
	float: left;        
	width: 120px;      
	margin: 5px;       
	padding: 0;
	border: 0;
}
#menu li a               
{
	display: block;   
	color: #FFFFFF;    
      background-color: rgb(0, 0, 0);          
	background-color: rgba(0, 0, 0, 0.5);   
	margin: 0;                        
	padding: 4px 8px;                     
	height: 120px;
	border:1px solid #FFFFFF;              
	text-decoration: none;               
}


#menu li a:hover {                      
      background-color: rgb(175, 214, 1);
      background-color: rgba(175, 214, 1, 0.5);
}


#menu .menuderoulant      
{
	display: none;      
	list-style-type: none; 
	margin: 0;          
	padding: 0;
	border: 0;
}
#menu .menuderoulant li        
{
	margin: 0;
	padding: 0;
	display: inline-flex;
	border: 0;
	width: auto;            
      border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}

#menu .menuderoulant li a   
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	height: 35px;
	width: 120px; 
	text-decoration: none;       
      background-color:rgb(0, 0, 0);
      background-color:rgba(0,0,0,0.5);
	  border-left: 1px solid rgb(255, 255, 255);

}
#menu .menuderoulant li a:hover      
{
	background-color: rgb(18, 89, 239);
      background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant li a:visited {    
      background-color:rgb(227, 22, 30);
      background-color:rgba(227, 22, 30, 0.5);
}



#menu li:hover > .menuderoulant { display: block; }   


#menu .menuderoulant2      
{
	display: none;         
	list-style-type: none;
	margin: 0;       
	padding: 0;
	border: 0;
}

#menu .menuderoulant2 li        
{
	margin-left: -130px;
	padding: 0;
	display: inline-flex;
	border: 0;
	width: auto;             
      border-top: 1px solid transparent;      
	border-right: 1px solid transparent;
}
#menu .menuderoulant2 li a   
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	height: 35px;
	width: 120px; 
	text-decoration: none;       
      background-color:rgb(0, 0, 0);
      background-color:rgba(0,0,0,0.5);
	  border-left: 1px solid rgb(255, 255, 255);

}
#menu .menuderoulant2 li a:hover     
{
	background-color: rgb(18, 89, 239);
      background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant2 li a:visited {    
      background-color:rgb(227, 22, 30);
      background-color:rgba(227, 22, 30, 0.5);
}



#menu li:hover > .menuderoulant2 { display: block; }   





#menu .menuderoulant3    
{
	display: none;      
	list-style-type: none;
	margin: 0;            
	padding: 0;
	border: 0;
}
#menu .menuderoulant3 li        
{
	margin-left: -260px;
	padding: 0;
	display: inline-flex;
	border: 0;
	width: auto;             
      border-top: 1px solid transparent;  
	border-right: 1px solid transparent;
}

#menu .menuderoulant3 li a   
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	height: 35px;
	width: 120px; 
	text-decoration: none;       
      background-color:rgb(0, 0, 0);
      background-color:rgba(0,0,0,0.5);
	  border-left: 1px solid rgb(255, 255, 255);

}
#menu .menuderoulant3 li a:hover      
{
	background-color: rgb(18, 89, 239);
      background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant3 li a:visited {         
      background-color:rgb(227, 22, 30);
      background-color:rgba(227, 22, 30, 0.5);
}



#menu li:hover > .menuderoulant3 { display: block; }   




#menu .menuderoulant4       
{
	display: none;        
	list-style-type: none;  
	margin: 0;       
	padding: 0;
	border: 0;
}
#menu .menuderoulant4 li      
{
	margin-left: -390px;
	padding: 0;
	display: inline-flex;
	border: 0;
	width: auto;          
      border-top: 1px solid transparent;    
	border-right: 1px solid transparent;
}

#menu .menuderoulant4 li a   
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	height: 35px;
	width: 120px; 
	text-decoration: none;       
      background-color:rgb(0, 0, 0);
      background-color:rgba(0,0,0,0.5);
	  border-left: 1px solid rgb(255, 255, 255);

}
#menu .menuderoulant4 li a:hover     
{
	background-color: rgb(18, 89, 239);
      background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant4 li a:visited {      
      background-color:rgb(227, 22, 30);
      background-color:rgba(227, 22, 30, 0.5);
}



#menu li:hover > .menuderoulant4 { display: block; }  

a.sony{
	background-image: url(http://dungeon-rpg.com/images/sony.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}
a.sega{
	background-image: url(http://dungeon-rpg.com/images/sega.jpg);
	background-size: 100%;
	background-position:center; 
	background-color: #000000;
	background-repeat: no-repeat;
}
a.divers{
	background-image: url(http://dungeon-rpg.com/images/divers.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}
a.nintendo{
	background-image: url(http://dungeon-rpg.com/images/nintendo.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
}
      <link rel="stylesheet" type="text/css" href="http://dungeon-rpg.com/css/menu.css" />

Bonjour,

J’allais répondre puis j’ai vu un ID dupliqué (id="menu au moins deux fois"), des liens vides et sans titre, puis des cellules de tableau dans des éléments de liste…

Commence par valider ton code et produire quelque chose d’un minimum accessible : ça ne résoudra pas ton problème mais améliorera énormément la qualité de ton menu.

PS: sur iPhone, Chrome est une copie de Safari : il n’y a que l’interface visuelle qui change (donc tester l’un revient à tester l’autre).

Bon courage !

Bonjour,

Je suis d'accord avec Ten... Il revoir la sémantique de ton code! Tu ne peux pas mettre des éléments de type tableau tels que <td></td> dans une liste! <td> est la balise qui définie une cellule d'un tableau: Elle doit obligatoirement être entourée de cette façon au minimum: <table><tr><td></td></tr></table>.

Pour ton menu je te recommanderai plus de choisir une sémantique de type "liste": <ul><li></li></ul>
et de styliser via le css les balises <li> afin qu'elles prennent la forme de boutons.

Pour l'id dupliqué effectivement ce n'est pas possible! un id est unique, une class peut définir plusieurs item.

Ça ne répond pas a ma question. Je sais qu'il manque des liens c'est normal pour le moment.

Le doublon est une erreur que j'ai déjà corrigé dans mon code hier mais pas mis a jour.

Pour les tableau, pourquoi on ne peut pas en mettre dans un liste?

Et faux sur chrome version pc il s'affiche parfaitement bien mais pas sur la version mobile. D'où ma question. ^^

Hello et bienvenue sur le forum

link_67 a écrit :
Pour les tableau, pourquoi on ne peut pas en mettre dans un liste?

En fait, l'élément table est bien autorisé à l'intérieur d'un item de liste, mais ici ce sont des cellules de tableaux (élément td) qui sont utilisées. Pour qu'il y ait une cellule de tableau, il faut avant tout qu'il y ait un tableau, avec une structure-type qui doit effectivement ressembler un minimum à ça :
<table><tr><td>…</td></tr></table>

Pour construire un menu déroulant, au niveau de la syntaxe, tu devrais normalement avoir une structure basée sur des listes imbriquées (tes cellules de tableaux sont donc inutiles) :

<ul>
   <li><a href="#">Sony</a>
      <ul>
          <li><a href="#">Playstation 1</a></li>
          <li><a href="#">Playstation 2</a></li>
          <li><a href="#">etc.</a></li>
      </ul>
   </li>
   <li><a href="#">Sega</a>
      <ul>
          <li><a href="#">Game gear</a></li>
          <li><a href="#">Master sytem</a></li>
          <li><a href="#">Megadrive</a></li>
          <li><a href="#">etc.</a></li>
      </ul>
   </li>
   … etc, etc.
</ul>

a écrit :
Et faux sur chrome version pc il s'affiche parfaitement bien mais pas sur la version mobile.

La remarque précédente portait sur le fait que sur Chrome et Safari desktop, le site s'affichera probablement de façon identique, tout comme sur Chrome et Safari mobile

Enfin, pour apporter un élément de réponse à ta question de base, à savoir «pourquoi le menu ne fonctionne pas sur mobile», c'est certainement pour la même raison que ce menu n'est pas navigable au clavier : tu limite l'affichage du menu déroulant au survol du pointeur alors qu'il faudrait le déclencher au focus. Tu peux faire ce correctif à partir du code HTML dont tu dispose actuellement, mais ce n'est pas la solution la plus sage…

Il est important de présenter un code HTML valide afin de te mettre à l'abri d'autres problèmes de rendu et de compatibilité

Le soucis c'est que j'avais commencé ainsi, mais le sous menu s'affichait verticalement et non horizontal.
J'ai eu un soucis avec le css du thème qui m'empêche de le faire ainsi. J'ai du bricoler ce système pour l afficher.

Pour la version mobile je vais détaillé un peu, le soucis que les puces apparaissent et le que le sous menu est toujours vertical et non horizontal. Le visu est complètement différent.

Je vais vois pour en coder un autre sinon parce que système ne s'adapte pas bien sur les mobiles