html - CSS Accordion Nav - 如果没有其他人打开，则需要默认树打开

Question

我主要使用本指南制作了一个导航栏:

http://designshack.net/articles/css/verticalaccordionav/

我需要的是在页面加载时扩展一棵默认树(标题 + 子链接)，我知道我可以通过在 CSS 中声明该部分的高度来实现。问题是，如果没有其他树被扩展，我只希望它保持扩展，即没有其他类别被悬停。基本上:一次只应展开一棵树，但我希望当没有树悬停时默认为展开的树。

有什么办法吗？仅使用 CSS 的解决方案是首选，但我觉得这需要 if/then 语句，因此无法使用 CSS 完成。

Answer 1

您可以使用 jq 不假思索地完成它，但是既然您想要它是一个 css 解决方案，那么您就得到了它:)，它有一个警告，您的用户必须将鼠标悬停在您网站的任何部分上，但是尽快当他对着浏览器工具栏说或检查另一个选项卡时，它会隐藏起来，但通常当用户这样做时要么即将离开您的网站，要么不会关注网站上发生的事情。

Here is the Jsfiddle Demo

您必须添加此 css 规则:

alpha {
   height: 38px;
   overflow: hidden;
    /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

html:hover .alpha, .menu-item.alpha:hover {
   height:130px;
}
nav:hover .alpha{
    height: 38px;
}

Css 方法通常更难思考，但它们具有很好的优势，祝您元素顺利。