Le sous-menu WordPress n’apparaît pas correctement

Je voudrais que le sous-menu apparaisse visible (comme un sous-menu normal) au lieu de se cacher sous une barre de défilement, mais je suis bloqué. Je n’arrive pas à le faire apparaître normalement.

http://postimg.org/image/yqe0nz2p7/

    .nav {
      float: right;
      display: inline-block;
      width: auto;
      position: relative;
    }
    .nav > ul > li {
      margin-right: 55px;
      overflow: visible;
    }
    .nav > ul > li > .sub-menu {
      position: absolute;
      padding-left: 0px;
      background-color: #fff;
      border-radius: 2px;
      border: 1px solid #ddd;
      z-index: 2;
    }

<nav class="nav" role="navigation">
  <ul>
    <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-18"><a href="http://www.ubietest.ubieportal.co.uk/web-design/">Web Design</a>
      <ul class="sub-menu">
        <li id="menu-item-992" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-992"><a href="http://www.ubietest.ubieportal.co.uk/terms/">Terms & Conditions</a>
        </li>
        <li id="menu-item-993" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-993"><a href="http://www.ubietest.ubieportal.co.uk/terms/">Terms & Conditions</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-772" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-772"><a href="http://www.ubietest.ubieportal.co.uk/search-engine-optimization/">Search Optimization</a>
      <ul class="sub-menu">
        <li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-994"><a href="http://www.ubietest.ubieportal.co.uk/terms/">Terms & Conditions</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://www.ubietest.ubieportal.co.uk/price-plans/">Price Plans</a>
    </li>
    <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://www.ubietest.ubieportal.co.uk/portfolio/">Portfolio</a>
    </li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.ubietest.ubieportal.co.uk/get-quote/">Get quote</a>
    </li>
  </ul>
</nav>

Solution n°1 trouvée

Je ne sais pas si cela vous aidera, mais voici la navigation secondaire que j’utilise en ce moment dans mon thème WordPress personnalisé construit sur Bones. Cela flotte à droite parce que c’est une navigation secondaire que j’utilise pour les liens sociaux. Dans mon cas, j’utilise une police d’icônes mais la configuration est la même que celle que j’utilise pour la navigation principale avec sous-menu.

Ce que je fais, c’est masquer le sous-menu ul en utilisant display:none;puis en survolant le premier <li>qui devient display:block !important;. Dans cet exemple ci-dessous, le .sN li:hover > ulCSS est ce qui fait l’affichage du sous-menu. J’ai sorti le _target blank pour vous 😉

Voici le HTML :

<nav class="socialNav">

    <ul class="sN">
        <li class="socialOpen"><a href="#">9</a>
            <ul class="socialSub">
                <li><a class="ss" href="#">G</a></li>
                <li><a class="ss" href="#">T</a></li>
                <li><a class="ss" href="#">Y</a></li>
                <li><a class="ss" href="#">V</a></li>
                <li><a class="ss" href="#">P</a></li>
                <li><a class="ss" href="#">Z</a></li>
            </ul>
        </li>
    </ul>

</nav>

et voici le CSS (désolé, il a beaucoup de style):

.socialNav {
    position: relative;
    float: right;
    height: 50px;
    width: 80px;
    border: none
}
.sN {
    margin: 0;
    width: 80px;
    height: 50px
}
.socialNav ul {
    position: relative;
    height: 50px;
    width: 80px;
    margin-top: 0
}
.socialNav li {
    text-align: center;
    width: 80px
}
.socialOpen a {
    display: block;
    font-family: tdp_icons;
    color: #999;
    font-size: 1.7em;
    line-height: 1.2em;
    height: 50px;
    padding: 8px 8px;
    border-left: 1px solid #555
}
.socialNav ul:hover li a:not(.ss) {
    color: #b13838 !important;
    border-left: 1px solid #666
}
.sN li ul {
    border-left: none !important;
    background: #f4f4f4;
    background: rgba(255,255,255,.9);
    display: none
}
.socialSub { border-radius: 0 0 0 14px }
.socialSub li {
    display: block;
    position: relative;
    width: 80px;
    height: 50px;
    border-left: 1px solid #444
}
.socialSub li:last-child {
    border-bottom: 1px solid #444;
    border-radius: 0 0 0 14px
}
.socialSub li a {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    line-height: 40px;
    border: none
}
.socialSub li a {
    font-family: tdp_icons;
    font-size: 1.7em;
    line-height: 1.7em;
    padding: 0;
    color: #444
}
.sN li:hover > ul {
    display: block !important;
    height: auto
}
.socialNav ul li a:hover { color: #b13838 }

Si cela est trop déroutant, je peux supprimer le style supplémentaire quand j’ai le temps. Parfois, j’utilise, position:absolutemais dans ce cas, je n’en avais pas besoin car les liens sont des icônes et donc toutes les balises <ul> <li>et ont la même largeur.<a>

J’espère que cela t’aides.