Menu à deux niveaux

[stevent]

Bonjour à tous 

 

Sur ce site , j'ai quelques soucis avec la création d'un menu horizontal à 2 niveaux.

 

ATTENTION il ne s'agit pas du BLOCKTOPMENU bien connu. Vous constaterez sur sur la page d'accueil, le BLOCKTOPMENU est bien présent et tourne sans prob. ( En cours de mise en page )

 

A cet endroit précis ( Cliquez sur le lien ), le menu rouge n'est plus le BLOCKTOPMENU mais une tentative de reproduction de ce dernier afin que le visiteur n'y voit que du feu. Il se retrouve en fait dans un autre module.

 

Le soucis : 

 

J'ai pu faire le nécessaire pour que, lorsque par exemple on passe la souris sur "Outillage entretien", le sous menu de premier niveau s'affiche. CEPENDANT j'éprouve énormément de mal à procéder à la mise en page CSS du sous menu de second niveau.

 

Passez la souris sur Outillage entretien/entretien intérieur ( par exemple ) et je pense que vous comprendrez mon problème directement.

 

J'ai retourné le CSS dans tous les sens afin de réussir à afficher le menu niveau 2 correctement mais sans succès. le but est d'avoir le meme résultat que la page d'accueil. Je ne parle bien sur pas de couleurs ou texte ou autre mais surtout de placement du "cadre"...

 

Quelqu'un saurait il me faire repérer mon erreur éventuelle ??

 

Ou tout simplement m'indiquer comment reproduire exactement le blocktopmenu dans un autre tpl ?

 

Merci à vous

[PixGeek]

il doit vous manquer une class

[stevent]

Je pense aussi mais je suis à cours de tentatives .... :/

[Ornot]

bjr,

 

tu peux modifier le css du second menu comme ceci:

 

 

.sf-menu li li ul {
    /* position: static; */
    /* display: block !important; */
    /* opacity: 1 !important; */
    /* background: none; */
    width: 100%;
}

 

dans le fichier http://new.autosportwilly.com/themes/asw/css/modules/blocktopmenu/css/superfish-modified.css

à la ligne 117

 

le width: 100% c'est ce qui change tout, ton sous menu de 2ème niveaux prend toute la place qu'il faut,

 

Ornot

[stevent]

Merci Ornot pour ta réponse mais .sf-menu et ce fichier CSS n'entrent pas en compte vu qu'ils n'agissent pas sur mon menu en question. :/

[stevent]

Mon problème est résolu, il s'agissait d'une erreur simple sans doutes dans mon CSS. J'avoue ne pas l'avoir ciblée car je me suis contenté de coper coller un CSS de tuto :/

Merci en tous cas pour votre participation et pour info voici mon ancien css et le nouveau : 

 

Ancien qui n'allait pas  : 

#menu {
	list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 97px;
    border-right: 1px solid white;
	background: #aa0000;
}
#menu ul {
  padding:0;
  margin:0;
  list-style:none;
  position:absolute;
  z-index:99;
  background:white;
}
#menu ul a {
	border-bottom: 1px solid gray;
    color: black;
    width: 280px;
	text-align: left;	
	padding-top:5px;
	padding-left: 8px;
}
#menu li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   box-shadow: none;
   border:none;
   margin:0
}
#menu a {
  border-bottom: 3px solid #e9e9e9;
    color: white;
    display: block;
    font-size: 12px;
    font-weight: 700;
    height: 37px;
    /*padding-left: 5px;
    padding-right: 5px;*/
    text-align: center;
    text-transform: uppercase;
    /*width: 101px;*/
}
#menu ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu li:hover {
   
}
#menu li li:hover {
   background: #999;
}
#menu ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu li:hover li {
  max-height: 15em;
}
#menu ul li ul li {
  display:none;
}
#menu ul li:hover ul li {
  display:block;
 background:gray;
  
}

Solution : 

#menu, #menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
  float:left;
}
#menu li {
    display: inline-block;
    position: relative;
    vertical-align: top;
}
#menu li li {
    display: inherit;
}
#menu a {
    border-bottom: 3px solid #e9e9e9;
    color: white;
    display: block;
    font-size: 12px;
    font-weight: 700;
    height: 37px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
    text-transform: uppercase;
    width: 97px;
	background: #aa0000 none repeat scroll 0 0;
}
#menu ul li a {
    padding: 5px 8px;
}
#menu ul {
    min-width: 100%;
    position: absolute;
    text-align: left;
    white-space: nowrap;
    z-index: 1000;
}
#menu ul ul {
    left: 100%;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    top: 0;
    transition: all 0.3s ease 0s;
}
#menu ul li:hover ul {
    max-width: 30em;
}
#menu ul li {
    max-height: 0;
    overflow: hidden;
    transition: all 0.8s ease 0s;
}
#menu li li li {
    max-height: inherit;
}
#menu li:hover li {
    max-height: 15em;
    overflow: visible;
}

#menu li:hover {
    background-image: none;
}
#menu li:hover a, .menu li li:hover a {
    color: #000;
}
#menu li:hover li a, #menu li:hover li li a {
  padding-right: 14px;
  width: 298px;
  background:white;
  color:black;
  float:left;
  border-bottom: 1px solid gray;
  border-left:1px solid gray;
  border-right:1px solid gray;
}
#menu li:hover a, #menu li li:hover a, #menu li li li:hover a {
    color: #000;
}

Merci à tous et à + !