子菜單中移動觸摸沒有顯示

Question

我有一個子菜單，它在瀏覽器工作正常，但是當我在手機中打開它，攻絲後其不顯示，這裏是工作fiddle

菜單很簡單，懸停顯示/隱藏，我意識到，懸停應該像我在移動屏幕上點擊一樣工作

任何人都可以請建議？問題只能移動

感謝

header .header_right > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0; 
 
    text-align: right; 
 
} 
 
header .header_right > ul > li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    background: #3275a6; 
 
    padding: 8px 16px; 
 
    color: #fff; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 15px; 
 
    font-weight: 400; 
 
    line-height: normal; 
 
    vertical-align: middle; 
 
    transition: all 0.3s ease 0s; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
header .header_right > ul > li:nth-child(1) { 
 
    margin-right: 10px; 
 
} 
 
header .header_right > ul > li > a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
header .header_right > ul > li:hover { 
 
    background: #14507d; 
 
} 
 
header .header_right > ul > li.actbtn { 
 
    background: #14507d; 
 
} 
 
.navigation-third { 
 
    background: #14507d; 
 
    border-radius: 0 0 4px 4px; 
 
    visibility: hidden; 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 33px; 
 
    width: 100%; 
 
} 
 
.navigation-third > li { 
 
    list-style: outside none none; 
 
} 
 
.navigation-third > li > a { 
 
    color: #fff; 
 
    font-size: 14px; 
 
    padding: 10px 12px; 
 
    display: block; 
 
    text-align: left; 
 
    text-decoration: none; 
 
} 
 
.navigation-third > li > a:hover { 
 
    background-color: #0076AA; 
 
} 
 
.navigation-third > li:nth-child(2) > a:hover { 
 
    border-radius: 0 0 4px 4px; 
 
} 
 
header .header_right > ul > li:nth-child(2):hover .navigation-third { 
 
    visibility: visible; 
 
}

<header> 
 
    <div class="header_right"> 
 
    <ul> 
 
     <li class="login_signup_lb login_search_small" href=""><i class="ico ico_user"></i></li> 
 
     <li> <i class="fa fa-sign-in"></i><a class="sub-3">&nbsp; Welcome, Ajay</a> 
 
     <ul class="navigation-third"> 
 
      <li><a href="user/" class=""><i class="fa fa-cog" aria-hidden="true"></i> User Account</a></li> 
 
      <li><a href="user_logout/" class=""><i class="fa fa-sign-out"></i> Logout</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>

Answer 1

中可以看出你缺少href標籤請這方面的工作環節

header .header_right > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0; 
 
    text-align: right; 
 
} 
 
header .header_right > ul > li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    background: #3275a6; 
 
    padding: 8px 16px; 
 
    color: #fff; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 15px; 
 
    font-weight: 400; 
 
    line-height: normal; 
 
    vertical-align: middle; 
 
    transition: all 0.3s ease 0s; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
header .header_right > ul > li:nth-child(1) { 
 
    margin-right: 10px; 
 
} 
 
header .header_right > ul > li > a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
header .header_right > ul > li:hover { 
 
    background: #14507d; 
 
} 
 
header .header_right > ul > li.actbtn { 
 
    background: #14507d; 
 
} 
 
.navigation-third { 
 
    background: #14507d; 
 
    border-radius: 0 0 4px 4px; 
 
    visibility: hidden; 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 33px; 
 
    width: 100%; 
 
} 
 
.navigation-third > li { 
 
    list-style: outside none none; 
 
} 
 
.navigation-third > li > a { 
 
    color: #fff; 
 
    font-size: 14px; 
 
    padding: 10px 12px; 
 
    display: block; 
 
    text-align: left; 
 
    text-decoration: none; 
 
} 
 
.navigation-third > li > a:hover { 
 
    background-color: #0076AA; 
 
} 
 
.navigation-third > li:nth-child(2) > a:hover { 
 
    border-radius: 0 0 4px 4px; 
 
} 
 
header .header_right > ul > li:nth-child(2):hover .navigation-third { 
 
    visibility: visible; 
 
}

<header> 
 
    <div class="header_right"> 
 
    <ul> 
 
     <li class="login_signup_lb login_search_small" href=""><i class="ico ico_user"></i></li> 
 
     <li> <i class="fa fa-sign-in"></i><a href="#" class="sub-3">&nbsp; Welcome, Ajay</a> 
 
     <ul class="navigation-third"> 
 
      <li><a href="user/" class=""><i class="fa fa-cog" aria-hidden="true"></i> User Account</a></li> 
 
      <li><a href="user_logout/" class=""><i class="fa fa-sign-out"></i> Logout</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>