【发布时间】：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 代码并帮助我找出这种断开连接的根本原因，我将不胜感激！
【问题讨论】：
标签： css internet-explorer dropdown microsoft-edge