我正在尝试制作一个带有导航功能的网页,如下所示：http://www.rex-ny.com/,您点击列表项目,其子项目出现并停留.
我可以悬停,但我无法弄清楚如何不停留时留下来.
似乎最简单的事情是最难做到的.
谢谢
这是一个jsfiddle http://jsfiddle.net/phzuC/
最佳答案
这是使用tabindex的OP请求的仅CSS解决方案
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/
#menu li > ul {
display:none;
}
#menu li:focus > ul {
display:block;
}
li {
outline: 0;
}
EDITED
如果您需要它,这是一个jQuery解决方案.它使子菜单保持打开状态,并且实现起来很简单. 11行代码.
DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/
$(document).ready(function() {
$(".nav-top > li").click(function(e) {
if($(this).find('ul').hasClass('expanded')) {
$(this).find('ul').removeClass('expanded').hide();
} else {
$(this).find('ul').addClass('expanded').show();
}
});
$('.nav-top a').click(function(e){
e.preventDefault();
});
});
