Question

我只在我的导航菜单上使用HTML5和CSS 3，我想要的是当我点击时让我们说“管理员”我的childmenu应弹出子链接。我现在的问题是，当我点击Home时，我的childmenu弹出，但它在0.5秒之后消失，因为它：活动？我尝试过：Hover并且它工作得很好但我不能使用它，因为我的webapplication是用于移动设备。我能做些什么才能让它发挥作用？为了能够点击并且子菜单在那里，直到我点击导航菜单中的另一个链接。

这是我的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，我认为如果我遇到您的问题，您需要这种功能。但它也很少开放。将鼠标悬停在菜单上。

以上网站完美适用于所有浏览器和手机。

：我的导航菜单出现活动问题

1 个答案: