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

即不是supprort：焦点在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;
}

Answer 2

请删除此.sub-menu-parent：focus-within .sub-menu， - 第52行来自dd_style.css

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

2 个答案: