menu haut horizontal : organiser les sous catégories

[universape]

Bonjour à toute la communauté !

 

Je vous demande de l'aide aujourd'hui car j'ai un problème avec le menu haut horizontal.

 

Pour les catégories tout va bien, mais ça se complique quand on passe aux sous catégories...

 

Ces dernières sont mal organisées, affichées horizontalement avec beaucoup d'espace entre chacune d'entre elles, et surtout sur deux lignes ce qui nuit à la lisibilité (et puis surtout c'est pas très beau) 

 

J'ai lu sur plusieurs sujets qu'il fallait éditer le fichier css superfish-modified du module pour régler ces problèmes mais aucune des solutions proposées ne correspond au contenu de mon fichier superfish-modified.css.

 

J'aimerais que mes sous catégories apparaissent l'une sous l'autre de manière verticale en dessous de la catégorie (je sais pas si c'est bien clair ce que je raconte) 

 

Je vous laisse un lien vers mon site, pour que vous puissiez avoir un aperçu de la chose : http://www.universape.com/

 

Merci pour votre aide, et à bientôt !

 

Cordialement.

[prestasafe]

Bonjour,

Ligne 174 masque ou supprime le float: left;

Cordialement

[universape]

Parfait merci pour cette solution !

 

Il me reste un petit problème, voire deux.

 

J'aimerais que les textes de mes sous-catégories soient centrés, j'ai essayé un text-align: center; mais je ne sais pas si je l'ai bien placé, ou même si c'est la bonne méthode.

 

Le deuxième souci c'est que j'aimerais que le background de chaque sous catégorie soit en surbrillance lors du passage de la souris (comme c'est le cas pour les catégories) 

 

Je vous laisse le contenu de mon superfish-modified.css pour que vous puissiez vous y retrouver : 

/*** ESSENTIAL STYLES ***/
.sf-contener {
  clear: both;
 float: left; 
  width: 100%; }

.sf-menu,
.sf-menu * {
  margin: 0;
  padding: 0; 
  list-style: none; }

.sf-menu {
  position: relative;
  margin-left:100px;
  padding: 0; text-align:center;
  width: 100%;
  border-bottom: 0px solid #000;
  border-top: 1px solid #ebebeb;
  background: #fff; 
  -webkit-transition:0.2s ease-out;
-moz-transition:0.2s ease-out;
-o-transition:0.2s ease-out;
transition:0.2s ease-out;}
  @media (max-width: 767px) {
    .sf-menu {
      display: none; } }

.sf-menu ul {
  position: absolute;
  top: -999em; 
  background: white; }
  @media (max-width: 767px) {
    .sf-menu ul {
      position: relative; } }

.sf-menu ul li {
  width: 100%; }

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ }

.sf-menu > li {
  /*float: left;*/
  display:inline-block;
  border-right: 0px solid #d6d4d4;
 /* margin-bottom: -3px;*/ }
  @media (max-width: 767px) {
    .sf-menu > li {
      float: none;
	  display:block;
      position: relative;
      border-right: none; }
      .sf-menu > li span {
        position: absolute;
        right: 6px;
		color:#fff;
        top: 20px;
        width: 30px;
        height: 30px;
        z-index: 2; }
        .sf-menu > li span:after {
          font-family: "FontAwesome";
          content: "\f067";
          font-size: 26px; }
        .sf-menu > li span.active:after {
          content: "\f068"; } }
  .sf-menu > li > a {
    font: 400 17px/22px "Bitter", sans-serif;
    text-transform: uppercase;
    color: #666;
	border-right:0px solid #ebebeb;
    display: block;
    padding: 19px 24px;
    border-bottom: 0px solid #e9e9e9;
-webkit-transition:0.2s ease-out;
-moz-transition:0.2s ease-out;
-o-transition:0.2s ease-out;
transition:0.2s ease-out;	}
  .sf-menu > li.sfHover > a,
  .sf-menu > li > a:hover, .sf-menu > li.sfHoverForce > a {
    background: /*#3ac5fe;*/ #ff1341;
	border-right:0px solid #ebebeb;
	 padding: 19px 24px;
    color: white; }

.sf-menu li li li a {
  display: inline-block;
  float:left;
  width:100%;
  text-align:left;
  position: relative;
  color: #393b3d;
  line-height: 16px;
  -webkit-transition:0.2s ease-out;
-o-transition:0.2s ease-out;
-moz-transition:0.2s ease-out;
transition:0.2s ease-out;
  font: 300 13px/18px "Roboto", sans-serif;
  padding-bottom: 10px; }
  .sf-menu li li li a:before {
    content: "\f105";
    display: inline-block;
    font-family: "FontAwesome";
    padding-right: 10px; }
  .sf-menu li li li a:hover {
    color: #333333; margin-left:7px;}

.sf-menu li ul {
  display: none;
  top: 59px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  box-shadow: rgba(255, 255, 255) 0px 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }

.sf-menu li li ul {
  position: static;
  display: block !important;
  opacity: 1 !important;
  background: none;
  -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; }

.sf-menu li li li ul {
  padding: 0 0 0 20px; }

.sf-menu li li li ul {
  width: 220px; }

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
  top: -999em; }

ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 200px;
  /* match ul width */
  top: 0; }

.sf-menu > li > ul {
  padding: 26px 30px 31px;
  margin-top:7px;
  border-bottom:4px solid #ff1341; }
  .sf-menu > li > ul > li > a {
    text-transform: uppercase; float:left; width:100%;
	text-align:center;
	padding-bottom:25px;
    font: 400 16px/20px "Bitter", sans-serif;
    color: #333333; 
    padding-bottom: 30px;
	margin-left: 25px;}
    .sf-menu > li > ul > li > a:hover {
color: rgba(0, 0, 0, 0.25);}

.sf-menu > li > ul > li {
  width: 20%;
  padding-right: 15px; }
  @media (max-width: 767px) {
    .sf-menu > li > ul > li {
      width: 50%; } }
  @media (max-width: 479px) {
    .sf-menu > li > ul > li {
      width: 100%;
      padding-bottom: 20px; } }
  @media (min-width: 768px) {
    .sf-menu > li > ul > li.first-in-line-lg {
      clear: left; } }
  @media (min-width: 480px) and (max-width: 767px) {
    .sf-menu > li > ul > li.first-in-line-xs {
      clear: left; } }

.sf-menu > li > ul > li.category-thumbnail {
  width: 100% !important;
  float: none;
  clear: both;
  overflow: hidden;
  padding-right: 0; }
  .sf-menu > li > ul > li.category-thumbnail > div {
    float: left;
    padding-left: 10px;
    width: 33.333%; }
    @media (max-width: 479px) {
      .sf-menu > li > ul > li.category-thumbnail > div {
        width: 100%;
        padding-left: 0;
        padding-top: 10px;
        text-align: center; } }
    .sf-menu > li > ul > li.category-thumbnail > div:first-child {
      padding-left: 0; }
    .sf-menu > li > ul > li.category-thumbnail > div img {
      max-width: 100%;
      display: block; }

.cat-title {
  display: none; }
  @media (max-width: 767px) {
    .cat-title {
      display: block;
      font: 400 18px/22px "Bitter", sans-serif;
      text-transform: uppercase;
      color: #fff;
      display: block;
      padding: 17px 20px;
      border-bottom: 3px solid #333;
      background: #333;
      position: relative; }
      .cat-title:hover {
        background: #333333;
        border-bottom-color: #333;
        color: white; }
      .cat-title:after {
        display: block;
        font-family: "FontAwesome";
        content: "\f067";
        position: absolute;
        right: 15px;
        top: 18px;
        font-size: 26px; }
      .cat-title.active:after {
        content: "\f068"; } }

.sf-menu li.sf-search {
  border: none; }
  .sf-menu li.sf-search input {
    display: inline;
    padding: 0 13px;
    height: 30px;
    line-height: 30px;
    background: white;
    margin: 13px 10px 0 0;
    font-size: 13px;
    color: #9c9b9b;
    border: 1px solid #d6d4d4; }

Merci pour votre aide