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

Posted 2023-03-06

【中文标题】CSS 下拉列表在 IE 或 Edge 中不起作用

【英文标题】：CSS Dropdown List Not Working in IE or Edge

【发布时间】：2018-08-23 23:53:33

【问题描述】：

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

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

实际站点：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 代码并帮助我找出这种断开连接的根本原因，我将不胜感激！

【参考方案1】：

ie 不支持 :focus-within CSS 伪类

阅读本文。https://caniuse.com/#feat=css-focus-within

如果你从你的 css 中删除这个 .sub-menu-parent:focus-within .sub-menu 它将起作用

.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;

【讨论】：

解决了问题！非常感谢您的帮助，拉贾斯！

很高兴听到这个消息。

【参考方案2】：

请删除这个 .sub-menu-parent:focus-within .sub-menu, - line number 52 From dd_style.css

【讨论】：

感谢您的反馈！两个答案都是正确的。