子菜单未在移动触摸中显示

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>