JSFiddle - React, Tailwind, and code Playground
by peteng
HTML
<div id="container">
<header id="header" class="clearfix wide">
<nav role="navition" id="menu_container">
<ul id="nav" style="visibility: visible;">
<li class="nav-item first dropdown"> <a class="nav-item-link smooth" href="http://josephcohenantiques.com/collections">
Catalogue
</a>
<div class="submenu" id="submenu_1" style="left: 0px; display: none;">
<div class="submenu_col_first ">
<ul>
<li>
<form action="/search" method="get" id="search-form" role="search">
<input name="q" type="text" id="search-field" placeholder="Search..." class="hint">
<input type="submit" value="" name="submit" id="search-submit">
<input type="hidden" name="type" value="product">
</form>
</li>
<li> <a class="first" href="http://josephcohenantiques.com/collections/asdas">Featured Pieces</a>
</li>
<li> <a class="first" href="http://josephcohenantiques.com/collections/march">New Items</a>
</li>
</ul>
</div>
<div class="submenu_col">
<ul>
<li> <a class="" href="/collections/indian-silver-antiques">Indian Silver</a>
</li>
<li> <a class="indian" href="/collections/indian-colonial-silver">Indian Colonial Silver</a>
</li>
<li> <a class="indian"...CSS
/* ==================================== */
html {
font-size: 100%;
overflow-y: scroll;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
font-size:14px;
line-height:21px;
}
body, button, input, select, textarea {
font-family: georgia;
color: #222;
}
::-moz-selection {
background: #9abcca;
color: #fff;
text-shadow: none;
}
::selection {
background: #9abcca;
color: #fff;
text-shadow: none;
}
a:hover, a:active, a:fo cus {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b, strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
dfn {
font-style: italic;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #eeeeee;
margin: 20px 0;
padding: 0;
}
ins {
background: #ff9;
color: #000;
text-decoration: none;
}
mark {
background: #ff0;
color: #000;
font-style: italic;
font-weight: bold;
}
pre, code, kbd, samp {
font-family: monospace, monospace;
_font-family:'courier new', monospace;
font-size: 1em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: none;
}
q:before, q:after {
content:"";
content: none;
}
small {
font-size: 85%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
ul, ol {
margin: 1em 0;
padding: 0 0 0 40px;
}
dd {
margin: 0 0 0 40px;
}
nav ul, nav ol {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
form {
margin: 0;
}
fieldset {
border: 0;
margin: 0;
...JavaScript
$(document).ready(function () {
var is_opened = false;
var delay = 250;
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var is_touch_device = 'ontouchstart' in document.documentElement;
if (isiPad) {
return false;
} else if (screen.width > 1024 || !is_touch_device) {
// OTHER DEVICES
$("#nav li").each(function() {
var li = $(this);
var left = $(this).position().left;
var divs = li.children('div');
divs.css('left', '-' + left + 'px');
li.mouseenter(function (e) {
e.stopPropagation();
divs.stop(true, true).slideDown(delay);
});
li.mouseleave(function () {
divs.stop().slideUp(delay);
return false;
});
});
}
});