Подменю WordPress не отображается правильно

Question

Я хочу, чтобы подменю появлялось видимым (как обычное подменю) вместо того, чтобы скрываться под полосой прокрутки, но я застрял. Я не могу получить его слишком нормально.

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 &#038; 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 &#038; 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 &#038; 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>

Answer 1

Не уверен, если это поможет, но вот вторичный нав я использую сейчас в моей пользовательской WordPress тема построена на костях. Это плавает прямо, потому что это вторичный навигатор, который я использую для социальных ссылок. В моем случае я использую шрифт значка, но настройка такая же, что и для основной навигации с подменю.

Что я делаю, скрыть подменю ul, используя display:none;, а затем при наведении первого <li>, который изменяется на display:block !important;. В приведенном ниже примере CSS .sN li:hover > ul - это то, что делает отображение подменю. Я вынул _target пустым для вас;)

Вот 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> 

и вот CSS (извините это очень стайлинг):

.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 } 

Если это слишком запутанным я может лишиться дополнительного стиля, когда у меня будет время. Иногда я использую position:absolute, но в этом случае мне не нужно, потому что ссылки являются значками, и поэтому все теги <ul><li> и <a> имеют одинаковую ширину.

Надеюсь, это поможет.