We Keep Coding

Trouble with Jsfiddle

I'm trying to make this Jsfiddle to demonstrate an issue but I can not get it to function properly, can anybody advise?
This is the live demo site that I am recreating a Jsfiddle for.
Here is my progress on the Jsfiddle. As you can see the thumbnails in my fiddle are not expanding and help would be greatly appreciated.
/*
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
*/
/* default.css */
#import url(//fonts.googleapis.com/css?family=Lato:300,400,700);
html { height: 100%; }
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #f9f9f9;
font-weight: 300;
font-size: 15px;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.container > header {
width: 90%;
max-width: 1240px;
margin: 0 auto;
position: relative;
padding: 0 30px 50px 30px;
}
.container > header {
padding: 60px 30px 50px;
text-align: center;
}
.container > header h1 {
font-size: 34px;
line-height: 38px;
margin: 0 auto;
font-weight: 700;
color: #333;
}
.container > header h1 span {
display: block;
font-size: 20px;
font-weight: 300;
}
.main > p {
text-align: center;
padding: 50px 20px;
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.8);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Component.css */
.og-grid {
list-style: none;
padding: 20px 0;
margin: 0 auto;
text-align: center;
width: 100%;
}
.og-grid li {
display: inline-block;
margin: 10px 5px 0 5px;
vertical-align: top;
height: 250px;
}
.og-grid li > a,
.og-grid li > a img {
border: none;
outline: none;
display: block;
position: relative;
}
.og-grid li.og-expanded > a::after {
top: auto;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #ddd;
border-width: 15px;
left: 50%;
margin: -20px 0 0 -15px;
}
.og-expander {
position: absolute;
background: #ddd;
top: auto;
left: 0;
width: 100%;
margin-top: 10px;
text-align: left;
height: 0;
overflow: hidden;
}
.og-expander-inner {
padding: 50px 30px;
height: 100%;
}
.og-close {
position: absolute;
width: 40px;
height: 40px;
top: 20px;
right: 20px;
cursor: pointer;
}
.og-close::before,
.og-close::after {
content: '';
position: absolute;
width: 100%;
top: 50%;
height: 1px;
background: #888;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.og-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.og-close:hover::before,
.og-close:hover::after {
background: #333;
}
.og-fullimg,
.og-details {
width: 50%;
float: left;
height: 100%;
overflow: hidden;
position: relative;
}
.og-details {
padding: 0 40px 0 20px;
}
.og-fullimg {
text-align: center;
}
.og-fullimg img {
display: inline-block;
max-height: 100%;
max-width: 100%;
}
.og-details h3 {
font-weight: 300;
font-size: 52px;
padding: 40px 0 10px;
margin-bottom: 10px;
}
.og-details p {
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #999;
}
.og-details a {
font-weight: 700;
font-size: 16px;
color: #333;
text-transform: uppercase;
letter-spacing: 2px;
padding: 10px 20px;
border: 3px solid #333;
display: inline-block;
margin: 30px 0 0;
outline: none;
}
.og-details a::before {
content: '\2192';
display: inline-block;
margin-right: 10px;
}
.og-details a:hover {
border-color: #999;
color: #999;
}
.og-loading {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ddd;
box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
-webkit-animation: loader 0.5s infinite ease-in-out both;
-moz-animation: loader 0.5s infinite ease-in-out both;
animation: loader 0.5s infinite ease-in-out both;
}
#-webkit-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
#-moz-keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
#keyframes loader {
0% { background: #ddd; }
33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
#media screen and (max-width: 830px) {
.og-expander h3 { font-size: 32px; }
.og-expander p { font-size: 13px; }
.og-expander a { font-size: 12px; }
}
#media screen and (max-width: 650px) {
.og-fullimg { display: none; }
.og-details { float: none; width: 100%; }
}
<div class="container">
<!--/ Codrops top bar -->
<header class="clearfix">
<h1>Thumbnail Grid <span>with Expanding Preview</span></h1>
</header>
<div class="main">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" alt="img01"/>
</a>
</li>
<li>
<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg" alt="img02"/>
</a>
</li>
<li>
<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg" alt="img03"/>
</a>
</li>
<li>
<a href="http://cargocollective.com/jaimemartinez/" data-largesrc="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/4.jpg" data-title="Sea lettuce" data-description="Bell pepper eggplant water spinach bell pepper radicchio kale artichoke earthnut pea beet greens carrot celtuce peanut radish mustard jícama tomato bamboo shoot quandong.">
<img src="https://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/4.jpg" alt="img04"/>
</a>
</li>
</ul>
<p>Filler text by Veggie Ipsum</p>
</div>
</div><!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/grid.js"></script>
<script>
$(function() {
Grid.init();
});
</script>
<script src="//tympanus.net/codrops/adpacks/demoad.js"></script>

Html button works well, but css button doesn't

I'm not a pro on coding, I created a popup script to use with a cpa redirect after user click the css button on the second popup.
But when user clicks the css button, nothing happens. I added a html button and it works like a charm. I tried to figure out the root cause but had no luck.
run the code here on w3schools.com
$(function() {
openUp('#overlay')
$("#popup").on('click', function() {
openUp('#overlay2')
closeDown('#overlay')
});
function openUp(el) {
$(el).fadeIn(500, function() {
$(this).next().show();
});
}
function closeDown(el) {
$(el).fadeOut(500, function() {
$(this).next().hide();
});
}
$('a').each(function(index, element) {
$(this).click(function(e) {
e.preventDefault();
});
});
});
#DIV_1 {
bottom: 0px;
box-shadow: rgba(255, 255, 255, 0.298) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.298) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 39px;
left: 0px;
letter-spacing: 2px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 79, 132) 0px 1px 0px;
text-size-adjust: 100%;
top: 0px;
width: 135px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 53.2344px 19.5px;
transform-origin: 53.2344px 19.5px;
caret-color: rgb(255, 255, 255);
background: rgb(0, 109, 183) linear-gradient(0deg, rgb(0, 109, 183), rgb(0, 139, 234)) repeat scroll 0% 0% / auto padding-box border-box;
border-top: 1px solid rgb(0, 79, 132);
border-right: 1px solid rgb(0, 79, 132);
border-bottom: 2px solid rgb(0, 79, 132);
border-left: 1px solid rgb(0, 79, 132);
font: normal normal 700 normal 10px / 10px Lego, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 13px 14px;
}
/*#DIV_1*/
img {
width: 100%;
object-fit: scale-down;
min-width: 100%;
height: auto;
}
.form-style-5 {
max-width: 500px;
display: inline-block;
padding: 8px 16px;
background: #f4f7f8;
margin: 8px auto;
padding: 16px;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 8px;
}
.form-style-5 label {
display: block;
margin-bottom: 6px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 30px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 17px 37px 16px 37px;
color: #000;
margin: 0 auto;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #ffcf00;
border-width: 1px 1px 3px;
margin-bottom: 10px;
background: rgb(255, 207, 0) none repeat scroll 0% 0% / auto padding-box border-box;
box-shadow: rgba(232, 105, 2, 0.5) 0px 0px 25px 0px inset;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
background: #ffae00;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.1s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?id={removed my aff id}"></script>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup" style="position:fixed; display:none; top:110px; width:90%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<img class="aligncenter wp-image-21 size-full" src="https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg" alt="ALT TEXT" width="492" height=a uto; />
<p <div id="DIV_1">
PROCEED >>
</p>
</div>
<div id="overlay2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup2" style="position:fixed; display:none; top:110px; width:85%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<p style="color:#FFFFFF;">
</p>
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number"></span> Please enter your information</legend>
<input type="text" name="field1" placeholder="Receiver's full name *">
<input type="email" name="field2" placeholder="Email *">
<textarea name="field3" placeholder="Shipping address:"></textarea>
<label for="job">Country:</label>
<select id="job" name="field4">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<textarea name="field5" placeholder="Greeting message: Eg. Hi Jonathan, ..Loving sister, Christina."></textarea>
</fieldset>
<button type="button" id="myBtn" onclick="og_load();">Apply</button>
<button class="button" style="vertical-align:middle" onclick="og_load();"><span>Apply </span></button>
</form>
</div>
</div>
<head>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?(removed my affiliate code)"></script>
</head>

Not sure what a 'css-button' is, but why not just add your .button class to the button like so:
<button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>

2 level responsive menu doesn't display block

I'm trying to make my old menu responsive for smaller screen sizes. I get the menu icon working properly, but when I open the list it displays inline instead of block. I tried several options but could not get it work right.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menu.responsive li {
float: none;
display: inline;
}
ul.menu.responsive li a {
display: block;
text-align: left;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

You have to put display: block; on the li.
Also, don't forget to remove the set float: none; on the a elements.
I added a z-index on the icon to be able to close it even if you were over the first element.
This may help you :
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
z-index: 10000;
}
ul.menu.responsive li {
float: none;
display: block;
}
ul.menu.responsive li a {
display: block;
text-align: left;
float: none;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

Clicking on page refreshes ; reappears two input elements?

I'm usig plugin for drop-down (sub-menu) in my HTML. My HTML looks like following:-
HTML
<div class="taxonomy" id="taxonomy_id" style="height: 54px">
<input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category_1" id="category_1" value="" /></div>
</body>
JS
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",{targetColumnSize: 1});
$("#category_1").mcDropdown("#categorymenu_1",{targetColumnSize: 1});
DEMO
Now, when I hit refresh once the page is loaded, I see the rest of html elements remain static on page, the dropdown items appears / refreshes instead. With each refresh they are loaded again the focus is changed it seems, can I change this behaviour.
UPDATE PLUGIN CSS
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}

Add !important to your css that must be used.
.myOverride:focus {
display: block !important;
}
Just like that. This was an example, but you'd have to change it up a little to suit your needs.

What comboBox or dropDownList is this one?

I'm looking to create a similar combobox or dropdown list like this where the box containing the selection items pops up when "Gold coast" or "Newest" button is click on the right side of the following page:
Deal Zoo
It seems to have a very slick look and feel and I wonder where to get the Javascript or ASP .Net component for this?

I'm the creator of Deal Zoo. Happy to help you out with the dropdown styling. It's a combination of javascript/jquery, css and plain ol' HTML to achieve the result.
You'll need to make sure you have the Jquery library. I use the google hosted version.
The HTML is:
<dl class="dropdown">
<dt><span>Newest<span class="icon"></span></span></dt>
<dd>
<ul style="display: none; ">
<li>Newest</li>
<li>Cheapest</li>
<li>Most Popular</li>
<li>Ending Soon</li>
</ul>
</dd>
</dl>
The CSS is (adapt as needed, the images would obviously need to be created)
.dropdown {
position: relative;
width: 200px;
}
.dropdown dt a {
display: block;
border: 1px solid #A3CFE4;
color: #585858;
background-color: #ececec;
background-image: -moz-linear-gradient(center top, #fefefe, #e9e9e9);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#e9e9e9));
border-style: solid;
border-color: #ccc;
border-width: 1px;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 5px 0 6px 5px;
text-shadow: 0 0 1px #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
}
.dropdown dt a:hover {
border-color: #b3b3b3;
background-color: #d7d7d7;
background-image: -moz-linear-gradient(center top, #f0f0f0, #dadada);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f0f0f0), to(#dadada));
}
.dropdown dt a:active {
color:#454545;
background: #ccc;
border-color: #bbb;
}
.dropdown dt a span {
cursor: pointer;
padding: 4px 5px 5px;
}
.dropdown dt a span .icon {
background: url(/images/dropdown-arrow.png) no-repeat scroll right center;
width: 14px;
height: 10px;
padding-left: 15px;
}
.dropdown dd ul {
display: none;
list-style: none;
position: absolute;
right: 0px;
top: 0px;
width: auto;
min-width: 170px;
background: white;
-webkit-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-moz-box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 0px;
z-index: 100;
font-size: 12px;
}
.dropdown dd ul li a {
padding: 2px 10px 2px 20px;
display: block;
color: #333;
}
.dropdown dd ul li a:hover {
color: #fefefe;
background: #3296df;
}
.dropdown dd ul li a.selected {
background: url(/images/tick.png) left 7px no-repeat;
font-weight: bold
}
.dropdown dd ul li a.selected:hover {
background-color: #3296df;
background-position: left -53px;
color: #fefefe;
}
The Javascript is:
$(document).ready(function (){
$(".dropdown dt a").click(function(e) {
e.preventDefault();
$(this).parents(".dropdown").children("dd").children("ul").toggle();
});
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});