Menu
I have an element that on focus via javascript changes to display absolute and covers its parent element. Then on blur back to default a table-cell.
What seems to happen is that the element just sits below the first table-cell, it doesn't go back to its original position?
This only appears to happen in webkit and I'm stuck for things to search for. Any help would be greatly appreciated.
The effect can be found on the search at the top.
Thanks in advance
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614"/>
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a
><ul class="nav-primary"><li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/whats-new" class="dropdown-toggle"><span>Whats New</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a href="#" class="subhead">New In</a>
<ul class="submenu">
<li><a href="#">Mirella Leotards</a></li>
<li><a href="#">Pointe Shoes</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#" class="subhead">Don't Miss</a>
<ul class="submenu">
<li><a href="#">Jozette by Mirella Laser Cut Camisole Leotard</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li><a href="#">Basic</a></li>
<li><a href="#">Classic</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Regulation</a></li>
<li><a href="#">Catsuits</a></li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li><a href="#">Tops</a></li>
<li><a href="#">Warmups</a></li>
<li><a href="#">Underwear</a></li>
<li><a href="#">Shorts</a></li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a></li>
<li><a class="subhead" href="#r">Street Dancewear</a></li>
<li><a class="subhead" href="#">Gymnastics</a></li>
<li><a class="subhead" href="#">Tutu's & Dresses</a></li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<a href="#"><img src="#" alt="Tappers & Pointers Leotard"><p>tappers & pointers</p></a>
</li>
<li class="featured-item">
<a href="#"><img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh"><p>sodanca<br></p></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/dance-shoes" class="dropdown-toggle" role="button"><span>Footwear</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> <a href="#">By Bloch</a></li>
<li> <a href="#">By Capezio</a></li>
<li> <a href="#">By Freed</a></li>
<li> <a href="#">By Merlet</a></li>
<li> <a href="#">By Russian Pointe</a></li>
<li> <a href="#">Warm Up Boots</a></li>
<li> <a href="#">Pointe Accessories</a></li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div></li></ul>
<ul class="nav-primary mobile">
<li class="nav-item"
><div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul
>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i></label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div><ul class="nav-secondary"><li class="nav-item nav-item-account">
<div class="dropdown">
<a href="#" class="dropdown-toggle"><span>My Account</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul><a href="#">My Account</a></ul>
<ul><a href="#">My Orders</a></ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item nav-item-cart">
<div class="dropdown">
<a href="/cart" class="dropdown-toggle bag"><span>£0.00<i class="bag-count">0</i></span></a>
</div>
</li></ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>
410
You have a table like structure, but you don't have any table row. Setting display to table-row on your de-nav element seems to fix your problem.
.de-nav {
display: table-row
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614" />
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>
try {
Typekit.load();
} catch (e) {}
</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a>
<ul class="nav-primary">
<li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/whats-new" class="dropdown-toggle"><span>Whats New</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a href="#" class="subhead">New In</a>
<ul class="submenu">
<li><a href="#">Mirella Leotards</a>
</li>
<li><a href="#">Pointe Shoes</a>
</li>
<li><a href="#">Accessories</a>
</li>
</ul>
</li>
<li><a href="#" class="subhead">Don't Miss</a>
<ul class="submenu">
<li><a href="#">Jozette by Mirella Laser Cut Camisole Leotard</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li><a href="#">Basic</a>
</li>
<li><a href="#">Classic</a>
</li>
<li><a href="#">Fashion</a>
</li>
<li><a href="#">Premium</a>
</li>
<li><a href="#">Regulation</a>
</li>
<li><a href="#">Catsuits</a>
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li><a href="#">Tops</a>
</li>
<li><a href="#">Warmups</a>
</li>
<li><a href="#">Underwear</a>
</li>
<li><a href="#">Shorts</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a>
</li>
<li><a class="subhead" href="#r">Street Dancewear</a>
</li>
<li><a class="subhead" href="#">Gymnastics</a>
</li>
<li><a class="subhead" href="#">Tutu's & Dresses</a>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<a href="#">
<img src="#" alt="Tappers & Pointers Leotard">
<p>tappers & pointers</p>
</a>
</li>
<li class="featured-item">
<a href="#">
<img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh">
<p>sodanca
<br>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a href="http://www.dance-etc.co.uk/collections/dance-shoes" class="dropdown-toggle" role="button"><span>Footwear</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> <a href="#">By Bloch</a>
</li>
<li> <a href="#">By Capezio</a>
</li>
<li> <a href="#">By Freed</a>
</li>
<li> <a href="#">By Merlet</a>
</li>
<li> <a href="#">By Russian Pointe</a>
</li>
<li> <a href="#">Warm Up Boots</a>
</li>
<li> <a href="#">Pointe Accessories</a>
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="nav-primary mobile">
<li class="nav-item">
<div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i>
</label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div>
<ul class="nav-secondary">
<li class="nav-item nav-item-account">
<div class="dropdown">
<a href="#" class="dropdown-toggle"><span>My Account</span></a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul><a href="#">My Account</a>
</ul>
<ul><a href="#">My Orders</a>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item nav-item-cart">
<div class="dropdown">
<a href="/cart" class="dropdown-toggle bag"><span>£0.00<i class="bag-count">0</i></span></a>
</div>
</li>
</ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
