PHP|Débutant :: Forums

Bonjour,

J'ai un souci avec un menu horizontal (CSS) dont les onglets vont à la ligne quand le navigateur client à un résolution inférieur à 1280 ou quand on zoom avec le navigateur.

Le problème est quand les onglets du menu principal vont à la ligne, le menu membre, qui s'affiche en dessous du menu principal quand on est connecté, n'est plus cliquable.

J'ai essayer display : inline; mais je n'est pas réussi à résoudre le problème.

Merci de votre aide

Voici le code CSS

/*
#########################################################
##############  Elements du menu déroulant  #############
#########################################################
*/

#menuDeroulant
{
    /*background: #6A6458;*/
  /*background:url("../images/tabrightH.gif") no-repeat right top;*/

    list-style-type: none;
    border: 0;
    position: absolute;
 
  padding : 0; /* pas de marge intérieure */
  margin : 0; /* ni extérieure */
  list-style : none; /* on supprime le style par défaut de la liste */
  line-height : 15px; /* on définit une hauteur pour chaque élément */
  text-align : center; /* on centre le texte qui se trouve dans la liste */
  font-weight : bold;
  font-size:100%;
  z-index:100;  /* avant plan des soumenu du menu sur le  menumenbre  */
}
#menuDeroulant ul {
   
    margin:0px;
    margin-top:0px;
    padding:0px 0px 0 0px;
    list-style:none;
   
  }
#menuDeroulant li
{
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    border: 0;
   
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
    display: block;
    height: 1%;
    background:url("../images/tableftH.gif") no-repeat left top;
    margin: 0;
    padding: 0px 0px 0px 1px;
    /*border-right: 1px solid #000;*/
    text-decoration: none;
   
}

#menuDeroulant a {
  float:left;
  background:url("../images/tableftH.gif") no-repeat left top;
  margin:0;
  padding: 0px 0px 0px 1px;
  text-decoration:none;
  width: 118px;

  }
 
#menuDeroulant a span {
  float:left;
  display:block;
  background:url("../images/tabrightH.gif") no-repeat right top;
  padding: 4px 0px;
  color:#FFF;
  width: 118px;

  }
 
#menuDeroulant li a:hover {
  background-position:0% -42px;
  /*background-color: #F2462E; */
}
#menuDeroulant li a:hover span {
  background-position:100% -42px;
  /*background-color: #F2462E; */
}
#menuDeroulant li a:active {
  /*background-color: #5F879D;*/
}

#menuDeroulant #current a {
        background-position:0% -42px;
}
#menuDeroulant #current a span {
        background-position:100% -42px;
       
}

/*
#########################################################
################# Eléments du sous menu ###############
#########################################################
*/

#menuDeroulant .sousMenu
{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
  width: 119px;
    z-index:100;

}
#menuDeroulant .sousMenu li
{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
  background-image: none;
  font-size:100%;
  font-weight : normal;
  text-align : left;
  z-index:100;
}

#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
    display: block;
    color: #FE9;
    margin: 0;
    border-style: none solid solid solid;
  border-color: #888899; /* couleur cadre  */
  border-width: 1px; 
  width: 97%;
  height : 18px;
    text-decoration: none;
  background-image: none;
  background-color: rgba(30, 30, 30, 0.9);
  z-index:100;
}
#menuDeroulant .sousMenu li a:hover
{
    background-image: none;
    background-color: #1160AA;
  color: #FFF;
  z-index:100;
}

#menuDeroulant li:hover > .sousMenu { display: block; }

/*
#########################################################
################# Eléments du sous menu 2 ###############
#########################################################
*/

#menuDeroulant .sousMenu2
{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
  margin    : 20px 0px 0px 117px ;
  position: absolute;
  width: 119px;   
    z-index:10;
}
#menuDeroulant .sousMenu2 li
{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
  background-image: none;
  font-size:100%;
  font-weight : normal;
  text-align : left;
}
#menuDeroulant .sousMenu2 li a:link, #menuDeroulant .sousMenu2 li a:visited
{
    display: block;
    color: #FE9;
    margin: 0;
    border-style: solid solid solid solid;
  border-color: #888899;
  border-width: 1px; 
  width: 100%;
    text-decoration: none;
  background-image: none;
  background-color: rgba(60, 60, 60, 0.9);
}
#menuDeroulant .sousMenu2 li a:hover
{
    background-image: none;
    background-color: #1160AA;
  color: #FFF;
}

#menuDeroulant li:hover > .sousMenu2 { display: block; }

/*
#########################################################
######## Elements du menu déroulant  Membre #############
#########################################################
*/
#menuDeroulantMembre
{
    /*background: #6A6458;*/
  /*background:url("../images/tabrightH.gif") no-repeat right top;*/
    list-style-type: none;
    border: 0;
    position: absolute;
 
  padding : 0; /* pas de marge intérieure */
  margin : 0; /* ni extérieure */
  margin-top: 8px;
  list-style : none; /* on supprime le style par défaut de la liste */
  line-height : 15px; /* on définit une hauteur pour chaque élément */
  text-align : center; /* on centre le texte qui se trouve dans la liste */
  font-weight : bold;

 
 
 
}
#menuDeroulantMembre ul {
    margin:0px;
    margin-top:0px;
    padding:0px 0px 0 0px;
    list-style:none;
  }
#menuDeroulantMembre li
{
    float: left;
    margin: 0;
    padding: 10;
    border: 0;
}
#menuDeroulantMembre li a:link, #menuDeroulantMembre li a:visited
{
    display: block;
    height: 1%;
    background:url("../images/tableftH.gif") no-repeat left top;
    margin: 0;
    padding: 0px 0px 0px 2px;
    /*border-right: 1px solid #000;*/
    text-decoration: none;
    border-color: #888899; /* couleur cadre  */
    color: #FE9;
}

#menuDeroulantMembre a {
  float:left;
  background:url("../images/tableftH.gif") no-repeat left top;
  margin:0;
  padding: 0px 0px 0px 2px;
  text-decoration:none;
  }
 
#menuDeroulantMembre a span {
  float:left;
  display:block;
  background:url("../images/tabrightH.gif") no-repeat right top;
  padding: 4px 11px;
  color:#FFF;
  }
 
#menuDeroulantMembre li a:hover {
  background-position:0% -42px;
  /*background-color: #F2462E; */
}
#menuDeroulantMembre li a:hover span {
  background-position:100% -42px;
  /*background-color: #F2462E; */
}
#menuDeroulantMembre li a:active {
  /*background-color: #5F879D;*/
}

#menuDeroulantMembre #current a {
        background-position:0% -42px;
}
#menuDeroulantMembre #current a span {
        background-position:100% -42px;
}

/*
#########################################################
#########################################################
*/

/*
#########################################################
################ Sous menu membre  ############
#########################################################
*/
#menuDeroulantMembre .sousMenu3
{
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
  margin    : 23px 0px 0px 0px ;
  position: absolute;
  width: 119px; 
  z-index:101;
 
 
}

#menuDeroulantMembre .sousMenu3 li
{
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
  background-image: none;
  font-size:100%;
  font-weight : normal;
  text-align : left;
}

#menuDeroulantMembre .sousMenu3 li a:link, #menuDeroulant .sousMenu3 li a:visited
{
    display: block;
    color: #FE9;
    margin: 0;
    border-style: solid solid solid solid;
  border-color: #888899;
  border-width: 1px; 
  width: 100%;
    text-decoration: none;
  background-image: none;
  background-color: rgba(60, 60, 60, 0.9);
}

#menuDeroulantMembre .sousMenu3 li a:hover
{
    background-image: none;
    background-color: #1160AA;
  color: #FFF;
}
#menuDeroulantMembre li:hover > .sousMenu3 { display: block; }