As the title suggests, I've made this dropdown menu and i don't know for what reason when i take my mouse over it or i remove the mouse from the parents element which has the hover effect the dropdown dissapears, i want it to stay so that the user can select.
.sub-menu{
display: none;
}
.sub-menu ul li{
margin: 15px;
width: 120px;
padding: 15px;
}
.navbar-header ul li:hover .sub-menu{
display: block !important;
position:absolute;
background: white;
margin-top: 15px;
margin-left: -15px;
}
.sub-menu ul:hover {
display: block !important;
}
.navbar-header ul li:hover .sub-menu ul{
display: block;
margin: 10px;
-o-transition:.3s ease;
-ms-transition:.3s ease;
-moz-transition:.3s ease;
-webkit-transition:.3s ease;
transition:.3s ease;
outline: none;
}
.sub-menu ul li:hover {
display: block;
background: #f69220;
}
.sub-menu ul li a{
color: black;
}
.navbar-header ul li:hover .sub-menu ul li{
display: block !important;
color: black ;
width: 150px;
padding: 5px;
border-radius: 0;
text-align: center;
}
<div class="navbar-header" style="padding: 0; margin: 0; ">
<ul class="navbar-ul">
<li> <a routerLink="/home"><img src="" class="navbar-logo" alt=""></a>
</li>
<!-- logo -->
<!-- <li><a routerLink="/home">Home</a></li> -->
<!-- <li><a routerLink="/aboutus">About Us</a></li> -->
<li>
<a routerLink="#">About Us</a>
<div class="sub-menu">
<ul>
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Blogs
</li>
</ul>
</div>
</li>
</div>
It's due to margin-top: 15px for submenu. In these 15px you go away from parent LI -> li:hover isn't applied -> submenu is hidden.
Change it for padding, or set margin to first submenu li. Below is a solution with padding-top: 15px.
.navbar-ul > li {background: red; position: relative;}
.sub-menu{
display: none;
}
.sub-menu ul li{
margin: 15px;
width: 120px;
padding: 15px;
}
.navbar-header ul li:hover .sub-menu{
display: block !important;
position:absolute;
background: yellow;
padding-top: 15px; /* padding-top instead of margin-top */
margin-left: -15px;
}
.sub-menu ul:hover {
display: block !important;
}
.navbar-header ul li:hover .sub-menu ul{
display: block;
margin: 10px;
-o-transition:.3s ease;
-ms-transition:.3s ease;
-moz-transition:.3s ease;
-webkit-transition:.3s ease;
transition:.3s ease;
outline: none;
}
.sub-menu ul li:hover {
display: block;
background: #f69220;
}
.sub-menu ul li a{
color: black;
}
.navbar-header ul li:hover .sub-menu ul li{
display: block !important;
color: black ;
width: 150px;
padding: 5px;
border-radius: 0;
text-align: center;
}
<div class="navbar-header" style="padding: 0; margin: 0; ">
<ul class="navbar-ul">
<li> <a routerLink="/home"><img src="" class="navbar-logo" alt=""></a>
</li>
<!-- logo -->
<!-- <li><a routerLink="/home">Home</a></li> -->
<!-- <li><a routerLink="/aboutus">About Us</a></li> -->
<li>
<a routerLink="#">About Us</a>
<div class="sub-menu">
<ul>
<li>
Gallery
</li>
<li>
Testimonials
</li>
<li>
Blogs
</li>
</ul>
</div>
</li>
</div>
Related
I'm a beginner when it comes to html and css, I have to make a website as a school project. I want to add the search bar in the navbar using css, I'v been searching but I couldn't find the answer.
Here's my code:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
</ul>
<div>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
jQuery(function($) {
$('#search-trigger').click(function() {
$('#search-input').toggleClass('search-input-open');
});
$(document).click(function(e) {
if (!$(e.target).closest('.ngen-search-form').length) {
$('#search-input').removeClass('search-input-open');
}
})
});
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial;
font-size: 18px;
background-image: url("Background5.gif");
background-size: 1366px 800px;
background-repeat: no-repeat;
}
#header img {
max-width: 100%;
height: 100%;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960 px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #ccc;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #ccc;
}
#nav ul li li a:hover {
color: #099;
}
#nav ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul li {
display: block;
}
#nav ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul li {
display: block;
}
#nav ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul li li a:hover {
color: #099;
}
#nav ul ul ul ul ul {
display: none;
position: absolute;
background-color: #333;
border: 2px solid #222;
border-top: 0;
margin-left: -2px;
}
#nav ul ul ul ul ul li {
display: block;
}
#nav ul ul ul ul ul li a,
visited {
color: #ccc;
}
#nav ul ul ul ul li li a:hover {
color: #099;
}
.form {
padding: 0px 0px 0px 0px;
float: right;
}
.form-search-input {
width: 0px;
height: 55px;
border: 0;
outline: 0;
font-size: 21px;
padding: 0px 0px 0px 0px;
color: #151515;
transition: all 0.5s;
}
.search-input-open {
width: 410px !important;
padding: 0px 0px 0px 20px !important;
display: initial !important;
}
.form-search-submit {
display: inline-block;
width: 55px;
height: 43px;
border: 0;
outline: 0;
background-color: #151515;
font-size: 21px;
color: #FFF;
cursor: pointer;
text-align: center;
}
<div id="maincontainer">
<div id="header">
<img src="C:\Users\Shogun\Desktop\The Witcher 3 Website\Banner.jpg" alt="the witcher 3 banner" id="thewitcherIMG" />
</div>
<div id="nav">
<div id="nav wrapper"></div>
<ul>
<li><a class="active" href="#">Home</a>
</li>
<li>
Story
<ul>
<li>Child of Prophecy
</li>
<li>
The Wild Hunt
</li>
<li>
Romance
</li>
<li>
Choice & Consequence
</li>
</ul>
</li>
<li>
Regions
<ul>
<li>White Orchard
</li>
<li>
Velen-No Man's Land
</li>
<li>
Novigrad
</li>
<li>
Royal Palace in Vizima
</li>
<li>
The Skellige Isles
</li>
<li>
Kaer Morhen
</li>
</ul>
</li>
<li>
Bestiary
<ul>
<li>Beasts
</li>
<li>
Cursed Ones
</li>
<li>
Draconians
</li>
<li>
Elementals
</li>
<li>
Hybrids
</li>
<li>
Insectoids
</li>
<li>
Necrophages
</li>
<li>
Ogroids
</li>
<li>
Relicts
</li>
<li>
Specters
</li>
<li>
Vampires
</li>
</ul>
</li>
<li>
Monster Hunts
</li>
<li>
DLC's
<ul>
<li>Heaarts of Stone
</li>
<li>
Blood and Wine
</li>
</ul>
</li>
<li>
CD Projekt Red
</li>
<li>
<div class="form">
<form class="form-search ngen-search-form" action="" method="get">
<input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search..." dir="ltr">
<span id="search-trigger" class="form-search-submit">🔎</span>
</form>
</div>
</li>
</ul>
<div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I can't seem to get my menu 100% of the browser. I want a logo beside the menu in the header to. I tried in the CSS to add a background colour and width or 100% but this didn't work
Here is my code
#logo {
padding-top: 10px;
padding-left: 85px;
float: left;
}
/*----- Top Level -----*/
#menu2 {
background: #3b3b3b;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #3e3436;
}
<div id="menu2">
<div id="logo">
<img src="logo2.png" alt="logo" />
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home
</li>
<li>About Us
</li>
<li>
What's On
<ul class="sub-menu">
<li>Sunday Services
</li>
<li>Speical Events
</li>
<li>Sunday School
</li>
<li>Youth Group
</li>
<li>Prayer Meeting
</li>
<li>Coffee Morning
</li>
<li>Woman's Fellowship
</li>
<li>Craft Class
</li>
<li>Diners Club
</li>
</ul>
</li>
<li>Get In Touch
</li>
<li class="current-item">Find Us
</li>
</ul>
</nav>
</div>
You just need to clear the floats: It's call a clearfix
There are many method of doing this...one is to add overflow:hidden to the wrapper
#menu2 {
background: #3b3b3b;
overflow: hidden;
/* quick clearfix */
}
Codepen Demo
#logo {
padding-top: 10px;
padding-left: 85px;
float: left;
}
/*----- Top Level -----*/
#menu2 {
background: #3b3b3b;
overflow: hidden;
/* quick clearfix */
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu > ul > li:hover > a,
.menu > ul > .current-item > a {
background: #2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background: #3e3436;
}
<div id="menu2">
<div id="logo">
<img src="logo2.png" alt="logo" />
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home
</li>
<li>About Us
</li>
<li>
What's On
<ul class="sub-menu">
<li>Sunday Services
</li>
<li>Speical Events
</li>
<li>Sunday School
</li>
<li>Youth Group
</li>
<li>Prayer Meeting
</li>
<li>Coffee Morning
</li>
<li>Woman's Fellowship
</li>
<li>Craft Class
</li>
<li>Diners Club
</li>
</ul>
</li>
<li>Get In Touch
</li>
<li class="current-item">Find Us
</li>
</ul>
</nav>
</div>
The background in the css should be background-color: #FFFFFF
Whenever I move my mouse to submenu, the list disappears suddenly.
I tried using z-index also, but it's not working. Most probably there is some other element overlapping my navigation menu.
here is Code Snippet for menu part:-
.nav {
background: url(images/bgnav.jpg);
clear: both;
height: 40px;
font-size:11px;
text-shadow:0 1px 1px #fff;
line-height: 40px;
}
.nav li {
float: left;
list-style-type: none;
text-transform:uppercase;
}
.nav li a {
color: #676767;
text-decoration: none;
padding:10px 8px;
}
.nav li:hover {
color: #fff;
text-decoration: none;
background:url(images/nav-hover.png);
text-shadow:0 1px 1px #000;
}
.nav li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.nav li:hover ul {
display: block;
position: absolute;
transition-delay: 0s;
}
.nav li ul li {
background: url(images/bgnav.jpg);
}
.nav li ul li a:hover {
background:url(images/nav-hover.png);
}
.submenu li{
transition: 0.2s 1s;
text-shadow:0 1px 1px #fff;
}
<div class="nav">
<div class="mainbody"><!-- #BeginLibraryItem "/Library/nav.lbi" --><ul>
<li>Home </li>
<li>About us</li>
<li>Company Profile</li>
<li>Babbitt Bearing Manufacturing</li>
<li>Rebabbitt Bearing
<ul class="submenu">
<li>White Bearing</li>
</ul>
</li>
<li> Quality</li>
<li> Reverse Engineering</li>
<li> in Situ Services</li>
<li> Contact us </li>
</ul><!-- #EndLibraryItem --></div>
</div>
Can anybody tell me what should I do to solve my problem?
Thank You
Try following css it's overlapping with your absshadow block apply z-index along with position property
This will solve your issue
.nav li {
float: left;
list-style-type: none;
text-transform: uppercase;
/* padding-bottom: 10px; */
z-index: 999;
position: relative;
}
I hope this will solve your problem
I have this submenu and I would like it so that when the dropdown menu is out it has a width of 100% and covers the whole page. At the moment if I change the width to 100% it just makes it the same width as the main menu.
This is my current HTML:
<header>
<div class="header">
<div class="nav">
<ul>
<li> Services
<ul class="sub"> <a href="services.html#branddesign">
<li><img class="imgcenter" src="images/Brand-Design-Circle-Blue.png" width="100px" />
<br>
Brand Design
</li></a>
<a href="services.html#brandonline">
<li><img class="imgcenter" src="images/Brand-Online-Circle-Blue.png" width="100px" />
<br>
Brand Online
</li></a>
<a href="services.html#brandmarketing">
<li><img class="imgcenter" src="images/Brand-Marketing-Circle-Blue.png" width="100px" />
<br>
Brand Marketing
</li></a>
<a href="services.html#brandmanagement">
<li><img class="imgcenter" src="images/Brand-Management-Circle-Blue.png" width="100px" />
<br>
Brand Management
</li></a>
</ul>
</li>
<li> Clients
</li>
<li> About
</li>
<li> Contact Us
</li>
</ul>
</div>
</div>
</div>
and this CSS:
.header {
position: fixed;
display: block;
float: left;
width: 100%;
height: auto;
background-color: #666;
z-index: 9999;
}
.nav {
position: static;
float: left;
width: 500px;
height: 50px;
margin: 10px 5px;
}
.nav a {
text-decoration: none;
color: #FFFFFF;
}
.nav ul > li:first-child {
padding-bottom: 25px;
}
.nav a:hover {
text-decoration: none;
color: #6db6e5;
}
.nav li {
font-family: "eras_demi_itcregular", Arial, Helvetica;
list-style: none;
float: left;
margin-right: 50px;
}
.nav li:hover a:hover {
padding-bottom: 5px;
border-bottom: 2px solid #6db6e5;
color: #6db6e5;
}
.nav ul li:hover > ul {
height:150px;
}
.nav ul {
list-style: none;
position: absolute;
display: inline-block;
margin-top: 23px;
}
.nav ul ul {
width: 494px;
background: #7d7c7c;
height: 0px;
overflow: hidden;
padding-left:0;
margin-left:0;
font-size: 12px;
text-align: center;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
.nav ul ul li {
padding: 10px;
margin-left: -1px;
margin-right: 0;
height: 129px;
}
.nav ul ul li:last-child {
}
.nav ul ul li:hover {
background: #666;
}
.nav li li {
height:130px;
-webkit-transition:all .3s ease-in-out;
}
Can anyone please tell me how I can make it so that the submenu can be wider than the main menu?
Try adding this to your CSS:
nav ul ul {
width: 100vw;
left: 0;
}
Fiddle: http://jsfiddle.net/9QE58/1/embedded/result/
That should keep it at 100% of the viewport width no matter what the pixel width is.
I've got a vertical flyout navigation. The 2nd level ul block is shown by setting its opacity from 0 to 1 on the parents li:hover;. This works fine in IE and others, but in FF the transition effect doesn't work.
The HTML markup:
<nav>
<ul>
<li>
<a title="" href="">Item</a>
</li>
<li>
<a title="" href="">Item</a>
<ul>
<li>
<a title="" href="">Item</a>
</li>
<li>
<a title="" href="">Item</a>
</li>
<li>
<a title="" href="">Item</a>
</li>
<li>
<a title="" href="">Item</a>
</li>
</ul>
</li>
<li>
<a title="" href="">Item</a>
<ul>
<li>
<a title="" href="">Item</a>
</li>
<li>
<a title="" href="">Item</a>
</li>
</ul>
</li>
<li>
<a title="" href="">Item</a>
</li>
</ul>
</nav>
Part from the CSS:
nav a{
display: block;
}
nav a:hover,
nav li.selected > a{
color: #00fa30;
}
nav li:hover > a,
nav li.selected > a{
color: #00fa30;
}
nav ul{
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav > ul{
border-bottom: 2px solid #006666;
font-size: 16px;
letter-spacing: 1px;
width: 212px;
}
nav > ul > li{
border-top: 2px solid #006666;
padding: 6px 0px;
line-height: 19px;
text-transform: uppercase;
}
nav > ul > li:hover{
position: relative;
z-index: 998;
}
nav > ul > li > ul{
position: absolute;
top: -2px;
left: 212px;
z-index: 999;
opacity: 0;
border: 2px solid #006666;
padding: 0px 6px;
background-color: #eae9e7;
font-size: 16px;
letter-spacing: 1px;
width: 180px;
}
nav > ul > li:hover ul{
opacity: 1;
-webkit-transition: opacity 0.6s ease-in;
-moz-transition: opacity 0.6s ease-in;
-o-transition: opacity 0.6s ease-in;
-ms-transition: opacity 0.6s ease-in;
transition: opacity 0.6s ease-in;
}
nav > ul > li > ul > li{
border-bottom: 2px solid #006666;
padding: 6px 0px;
line-height: 0px;
text-transform: uppercase;
}
nav > ul > li:hover > ul > li{
line-height: 19px;
}
nav > ul > li > ul > li:last-child{
border-bottom: 0px;
}
DEMO
If you remove the :hover from ul > li:hover{ so that it becomes
ul > li {
position: relative;
z-index: 998;
}
then your example provided will work. Sorry if I misinterpret this but here is my understanding. Apparently FireFox cannot properly handle whenever a parent element of a transitioning child has its positioning modified simultaneously. This is a known bug according to this link https://bugzilla.mozilla.org/show_bug.cgi?id=625289.
If you absolutely need to apply frame/position modifying styles on hover to the parent element then you may need another work around via javascript, jQuery, etc, but in your example provided it didn't change anything. For proof here is a working js fiddle: JSFiddle