Last night I was working on replicating an interesting Codepen I found. After I finished it, I was extremely happy with how it worked. Since I wasn't planning on using it in production, I neglected to use the proper CSS prefixes to insure cross-browser compatibility. However, when I decided to check it in Safari and Firefox I noticed that my ":hover" events weren't translating properly, and so far I have been unable to fix it. I do not need this project for anything, but I would like some help figuring out why this is occurring so I can be prepared to address this issue in future developments.
In Firefox and Safari, when you mouse over the menu items that are to the right of the "Fly-Out" menu headers they collapse, whereas in Chrome they remain out.
I would like to stress that I understand why certain features like the transitions aren't working, as I didn't specify the "webkit" or "moz" prefix for most of them. It is simply the collapsing menu that's troubling me.
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:[email protected]">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">[email protected]</span>
</a>
</li>
</ul>
</li>
</ul>The problem wasn't the vendor prefixes for transforms and transition. The problem was z-index: -1 property. By definition, element with absolute position should be on top of all the elements positioned inline or relative. The trick with -1 worked and placed it below the parent menu element which has position relative. However, in Firefox and IE it was placed even below the body, so when the mouse hovers on dropped menu in fact in hovers on body, i.e. out of the parent menu <li> element.
To solve this problem I made the changes:
In the ul.sidebar > li > a class changed z-index to 1, and added the following properties to the ul.sidebar > li > a class:
position: absolute;
left: 0;
background: #aa2266;
z-index: 1;
I've checked the result on Firefox and Internet Explorer and now it works fine :)
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 {
position: absolute;
left: 0;
background: #aa2266;
z-index: 1;
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: 0;
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:[email protected]">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">[email protected]</span>
</a>
</li>
</ul>
</li>
</ul>