html - :active problems with my navigation menu

Question

我只在我的导航菜单上使用 HTML5 和 CSS 3，我想要的是当我点击“管理”时，我的子菜单应该弹出子链接。我现在的问题是，当我点击主页时，我的子菜单会弹出，但它会在 0.5 秒后消失，因为它的 :active?我试过 :Hover 并且它工作得很好但是我不能使用它因为我的网络应用程序是用于移动设备的。我该怎么做才能让它发挥作用？为了能够点击并且子菜单在那里，直到我点击导航菜单中的另一个链接。

这是我的 CSS:

#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 961px;
  margin: 0;
  padding: 0;
  list-style: none;
    /* gradient */
    background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#074a98), to(#05366e));
    background: -moz-linear-gradient(top,  #074a98,  #05366e);
    background: linear-gradient(-90deg, #074a98, #05366e);     
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0 30px;
}

ul#nav .current a, ul#nav li:active > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
 background: #dd006b;  
}


ul#nav  ul {
  display: none;
}


ul#nav li:active > ul {
  position: absolute;
  display: block;
  width: 961px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  /* gradient */
  background: #dd006b url(../img/menu-child.png) repeat-x;      
  background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e));
  background: -moz-linear-gradient(top,  #dd006b,  #a1014e);
  background: linear-gradient(-90deg, #dd006b, #a1014e); 

}

ul#nav li:active > ul li a {
  float: left;
  font: bold 12px verdana,arial,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 2 30px 0 0;
  background: #dd006b url(../img/menu-child.png) repeat-x;  
  background: -webkit-gradient(linear, left top, left bottom, from(#dd006b), to(#a1014e));
  background: -moz-linear-gradient(top,  #dd006b,  #a1014e);
  background: linear-gradient(-90deg, #dd006b, #a1014e);  
}

ul#nav li:active > ul li a:active {
  text-decoration: none;
  text-shadow: none;
}

提前致谢!

Answer 1

尝试使用 jquery 来获得这个功能，因为在 html 或 css 中没有这样的方法来做到这一点，你的要求是当你/用户点击其他链接然后之前的链接应该隐藏等等。

例如你可以看到这个site ，如果我遇到您的问题，我认为您需要这种功能。但它的开放时间也很短。将鼠标悬停在菜单上。

上述网站在所有浏览器和手机上都能完美运行。