简要说明
昨晚我在复制一个有趣的Codepen。完成后，我非常满意它的工作方式。由于我没有打算在生产中使用它，所以忽略了使用正确的CSS前缀，以确保跨浏览器兼容性。然而，当我决定在Safari和Firefox中检查它时，我注意到我的“：hover”事件不能正常转换，迄今为止我一直无法解决它。我不需要这个项目，但我希望能帮我弄清楚为什么会出现这种情况，这样我就可以准备在将来的开发中解决这个问题。
直接问题
在Firefox和Safari中，当您将鼠标悬停在“Fly-Out”菜单标题右侧的菜单项上时，它们会折叠，而在Chrome中它们则保持在外面。
我想强调的是，我理解为什么某些功能如过渡效果不起作用，因为我没有为大多数功能指定“webkit”或“moz”前缀。问题只是困扰我的折叠菜单。
代码
ul.sidebar {
display: block;
position: absolute;
margin: 0;
left: 0;
height: 100%;
width: 6.5em;
background: #aa2266;
padding: 0;
text-align: center;
}
ul.sidebar * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul.sidebar a {
color: white;
text-decoration: none;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
ul.sidebar a > i {
margin-top: 0.13333em;
font-size: 2em;
display: block;
margin-bottom: 0.2em;
}
ul.sidebar a > span {
font-size: 0.8em;
font-family: sans-serif;
}
ul.sidebar li {
transition: background 0.3s;
background: #aa2266;
}
ul.sidebar > li {
margin: 0;
padding: 0;
height: 4em;
display: inline-block;
position: relative;
width: 100%;
background: #aa2266;
transition: background 0.3s;
}
ul.sidebar > li:hover {
background: #dc3278;
}
ul.sidebar > li:hover:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 6px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
transition: background 0.3s;
}
ul.sidebar > li > a:hover {
background: #ff5f87;
}
ul.sidebar > li > ul {
overflow: hidden;
height: 4em;
padding: 0;
position: absolute;
z-index: -1;
margin: 0;
color: red;
left: 100%;
transition-delay: 0.3s;
transition-property: transform;
transition-duration: 0.6s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: auto;
list-style: none;
white-space: nowrap;
top: 0;
background: #dc3278;
}
ul.sidebar > li > ul > li {
overflow: hidden;
background: none;
margin: 0 0px 0 -4px;
padding: 0;
display: inline-block;
width: 6.5em;
height: 4em;
transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
background: #fa648c;
}
ul.sidebar li:hover > ul {
-webkit-transform: translateX(0);
transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
color: white;
}
body {
padding: 0;
position: fixed;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #450f30;
}
description {
position: absolute;
bottom: 0;
right: 0;
padding: 0 0.4em 1em 0;
color: white;
font-size: 20px;
font-family: times new roman;
}<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
Full Stack Developer
</description>
<ul class="sidebar">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>
My Projects
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-question-circle"></i>
<span>Nothing</span>
</a>
</li>
<li>
<a>
<i class="fa fa-square"></i>
<span>Boxes for all</span>
</a>
</li>
<li>
<a>
<i class="fa fa-th-large"></i>
<span>More boxes</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-info-circle"></i>
<span>
About
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-eye"></i>
<span>I have eyes</span>
</a>
</li>
<li>
<a>
<i class="fa fa-bed"></i>
<span>and a bed</span>
</a>
</li>
<li>
<a>
<i class="fa fa-heartbeat"></i>
<span>plus cool icons</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-globe">
</i>
<span>
Links
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-external-link"></i>
<span>No Links</span>
</a>
</li>
<li>
<a>
<i class="fa fa-fire"></i>
<span>For the wicked</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-envelope-o"></i>
<span>
Contact
</span>
</a>
<ul>
<li>
<a href="mailto:alec.menke@gmail.com">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">alec.menke@gmail.com</span>
</a>
</li>
</ul>
</li>
</ul>