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主題二級導航。這是正確的，因爲它是我用於社交鏈接的輔助導航。在我的情況下，我使用的是圖標字體，但設置與我用於子菜單的主導航相同。

我要做的就是躲徘徊第一<li>改變到display:block !important;在使用display:none;，然後在子菜單UL認證。在下面這個例子中，.sN li:hover > ul CSS就是讓子菜單顯示的東西。我拿出_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>標籤都是相同的寬度。

希望這會有所幫助。