使纯css可折叠菜单由移动浏览器的向下箭头触发

我正在尝试制作一个移动版的菜单。所以我有一个项目清单。仅显示当前导航级别的li。在伪：的帮助下，我在该li的链接后创建了一个箭头。我尝试在单击箭头时显示所有li项目

我的html：

<ul class="top-nav">
  <li>
    <a href=#>Textbla</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlpops</a>
  </li>
  <li>
    <a href=#>Google Res</a>
  </li>
</ul> 

---

我不想使用任何javascript，所以我只搜索css解决方案。这可以在sass中完成吗？或者有什么css3技巧我可以利用并实现它吗？

目标选择器。据我所知，你所描述的在css中是不可能的

新答案 我重读了你的问题，意识到你在为移动浏览器寻找这个。他们可能也无法识别

指针事件。不依赖于
指针事件
，除非作为增强功能，但需要更多的标记。到目前为止，我已经在FF、Chrome和IE8/9中进行了测试，效果良好。（我很好奇，在某些浏览器中，
悬停盾
上的零不透明度是否需要为0.01）。您必须测试您的移动应用程序

HTML

<div class="hidden-nav">  
    <div class="nav-expander"></div>
    <div class="hover-shield"></div>  
    <ul class="top-nav">
      <li>
        <a href=#>Textlinks Adv</a>
      </li>
      <li class="nav-current">
        <a href=#>Textlinks Publ</a>
      </li>
      <li>
        <a href=#>Google Shopping</a>
      </li>
    </ul>
</div>

<ul class="top-nav">
  <li class="nav-expander"></li>  
  <li>
    <a href=#>Textlinks Adv</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlinks Publ</a>
  </li>
  <li>
    <a href=#>Google Shopping</a>
  </li>
</ul>

原始答案
但是在FF和Chrome（已测试）中效果很好，在IE8/9中也可以正常工作（它无法识别
导航电流
上的
指针事件
属性，因此它在
导航电流
悬停时打开导航）；IE7与IE8/9类似，只是没有箭头，因为
：after
无法识别

需要一个额外的
li

HTML

<div class="hidden-nav">  
    <div class="nav-expander"></div>
    <div class="hover-shield"></div>  
    <ul class="top-nav">
      <li>
        <a href=#>Textlinks Adv</a>
      </li>
      <li class="nav-current">
        <a href=#>Textlinks Publ</a>
      </li>
      <li>
        <a href=#>Google Shopping</a>
      </li>
    </ul>
</div>

<ul class="top-nav">
  <li class="nav-expander"></li>  
  <li>
    <a href=#>Textlinks Adv</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlinks Publ</a>
  </li>
  <li>
    <a href=#>Google Shopping</a>
  </li>
</ul>

目标
选择器。据我所知，你所描述的在css中是不可能的

新答案
我重读了你的问题，意识到你在为移动浏览器寻找这个。他们可能也无法识别
指针事件。不依赖于
指针事件
，除非作为增强功能，但需要更多的标记。到目前为止，我已经在FF、Chrome和IE8/9中进行了测试，效果良好。（我很好奇，在某些浏览器中，
悬停盾
上的零不透明度是否需要为0.01）。您必须测试您的移动应用程序

HTML

<div class="hidden-nav">  
    <div class="nav-expander"></div>
    <div class="hover-shield"></div>  
    <ul class="top-nav">
      <li>
        <a href=#>Textlinks Adv</a>
      </li>
      <li class="nav-current">
        <a href=#>Textlinks Publ</a>
      </li>
      <li>
        <a href=#>Google Shopping</a>
      </li>
    </ul>
</div>

<ul class="top-nav">
  <li class="nav-expander"></li>  
  <li>
    <a href=#>Textlinks Adv</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlinks Publ</a>
  </li>
  <li>
    <a href=#>Google Shopping</a>
  </li>
</ul>

原始答案
但是在FF和Chrome（已测试）中效果很好，在IE8/9中也可以正常工作（它无法识别
导航电流
上的
指针事件
属性，因此它在
导航电流
悬停时打开导航）；IE7与IE8/9类似，只是没有箭头，因为
：after
无法识别

需要一个额外的
li

HTML

<div class="hidden-nav">  
    <div class="nav-expander"></div>
    <div class="hover-shield"></div>  
    <ul class="top-nav">
      <li>
        <a href=#>Textlinks Adv</a>
      </li>
      <li class="nav-current">
        <a href=#>Textlinks Publ</a>
      </li>
      <li>
        <a href=#>Google Shopping</a>
      </li>
    </ul>
</div>

<ul class="top-nav">
  <li class="nav-expander"></li>  
  <li>
    <a href=#>Textlinks Adv</a>
  </li>
  <li class="nav-current">
    <a href=#>Textlinks Publ</a>
  </li>
  <li>
    <a href=#>Google Shopping</a>
  </li>
</ul>

非常感谢您分享您的工作。它真的很好，很有用。我的问题是nav出现在箭头的悬停位置，但也出现在当前li项目的悬停位置。指针事件不应该阻止这一点吗？我们如何限制箭头悬停的功能？@nasia——正如我在回答中提到的，IE9和以下版本不识别
指针事件
（我还没有检查IE10是否如此）。这就是IE的行为，除非你实现一些javascript来解决它。很抱歉没有给你详细信息。我在所有浏览器（最新版本）上都有这个问题，不仅仅是IE.@nasia——Firefox11和Chrome18对我来说工作得很好，所以我不知道你为什么会有这个问题。我有一个想法，也许有一个稍微不同的解决方案，使它更适合跨浏览器使用，但我不知道我是否能在明天之前使用它。@nasia--你忘记了
位置：relative在
.top nav
上，因此
z索引被忽略。非常感谢您分享您的工作。它真的很好，很有用。我的问题是nav出现在箭头的悬停位置，但也出现在当前li项目的悬停位置。指针事件不应该阻止这一点吗？我们如何限制箭头悬停的功能？@nasia——正如我在回答中提到的，IE9和以下版本不识别
指针事件
（我还没有检查IE10是否如此）。这就是IE的行为，除非你实现一些javascript来解决它。很抱歉没有给你详细信息。我在所有浏览器（最新版本）上都有这个问题，不仅仅是IE.@nasia——Firefox11和Chrome18对我来说工作得很好，所以我不知道你为什么会有这个问题。我有一个想法，也许有一个稍微不同的解决方案，使它更适合跨浏览器使用，但我不知道我是否能在明天之前使用它。@nasia--你忘记了
位置：relative在
.top nav
上，因此
z索引被忽略。