CSS 下拉列表在 IE 或 Edge 中不起作用

Question

首先，我只想说在编码方面我是一个“修补匠”。我通常可以在互联网上挖掘，找到建议并在短时间内实施。我一直在调查的这个问题变得更加困难，这是我第一次决定发布一个需要帮助的请求。

我正在努力将基于 CSS 的下拉列表合并到我家族的商业网站中。下拉菜单具有向下滑动效果，因为它通过 CSS 转换可见性。在 Firefox 和 Opera 上，DD 工作没有问题（实际上看起来非常好）。不幸的是，它不适用于任何 IE 或 Edge 浏览器，即使在过去一周研究并尝试了多种建议之后也是如此。我通过 Lint (csslint.net) 运行了 CSS 代码，但没有发现任何错误。我想知道这个问题是否与 CSS 翻译/转换/转换代码中的浏览器扩展有关，或者我是否遗漏了 CSS 焦点/焦点内/悬停代码中的某些内容。

实际站点：http : //www.powerstone45.com/我正在处理的下拉列表是出现在“产品类别”下的下拉列表：（抱歉页面的其余部分是日语）

这是驱动下拉列表的相关代码：

.sub-menu-parent { 
  font-size: 12px;
  margin: 0 !important;
  display: block;
  height: auto !important;
  line-height: normal !important;
  padding: 5px 10px !important;
  text-decoration: none;
  background-color: #FEFEFE;
  color: #444444;
  cursor: pointer;
}

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background:#fff;
  -webkit-transform: translateY(-2em);
	   -moz-transform: translateY(-2em);
	    -ms-transform: translateY(-2em);
	     -o-transform: translateY(-2em);
          transform: translateY(-2em);
  z-index: -1;
  -webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	 -moz-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	  -ms-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	   -o-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
          transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
  height: auto !important;
  line-height: normal !important;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
	 -moz-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
	  -ms-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
	   -o-box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
		  box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
}

.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  z-index: 1;
-webkit-transform: translateY(0%);
	 -moz-transform: translateY(0%);
	  -ms-transform: translateY(0%);
	   -o-transform: translateY(0%);
  		  transform: translateY(0%);
  -webkit-transition-delay: 0s, 0s, 0.3s;
	   -moz-transition-delay: 0s, 0s, 0.3s;
	    -ms-transition-delay: 0s, 0s, 0.3s;
	     -o-transition-delay: 0s, 0s, 0.3s;
          transition-delay: 0s, 0s, 0.3s;
}

/* presentational */
nav a { color: #444444; display: block; padding: 0.5em 1em; text-decoration: none; }
nav a:hover { color: #fff; background: #9264E0;}
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0; }

nav > ul { background: #fff; text-align: center; }
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; }
nav > ul > li:first-child { border-left: none; }

.sub-menu {
  background: #fff;
}

#navdd {
			position:relative;
			width:100%;
			margin-top:-15px;
			display:block;
}

<div id="navdd">
  <p>			
    <nav>
      <ul>
        <li class="sub-menu-parent" tab-index="0">
          Bracelet
          <ul class="sub-menu">
            <li><a href="prod_showcase.php?cid=br&rfsh=0">Bracelet</a></li>
            <li><a href="prod_showcase.php?cid=ne&rfsh=0">Necklace</a></li>
            <li><a href="prod_showcase.php?cid=pe&rfsh=0">Pendants</a></li>
            <li><a href="prod_showcase.php?cid=ot&rfsh=0">Other Products</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </p>
</div>

如果有人可以查看我的 CSS 代码并帮助我找出这种断开连接的根本原因，我将不胜感激！

Answer 1

即不支持 :focus-within CSS 伪类

读这个。https://caniuse.com/#feat=css-focus-within

如果您.sub-menu-parent:focus-within .sub-menu从 css 中删除它，它将起作用

.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:hover .sub-menu {
    visibility: visible; /* shows sub-menu */
    opacity: 1;
    z-index: 1;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition-delay: 0s, 0s, 0.3s;
    -moz-transition-delay: 0s, 0s, 0.3s;
    -ms-transition-delay: 0s, 0s, 0.3s;
    -o-transition-delay: 0s, 0s, 0.3s;
    transition-delay: 0s, 0s, 0.3s;
}