Whenever I try to hover over the dropdown menu, it frustratingly appears behind the content div that I painstakingly created. Despite all my efforts with z-index adjustments, the issue still persists. Below you'll find all the code for my website, but alas, it refuses to display as intended. For the correct version, please visit: "." Any assistance or guidance will be immensely appreciated! Thank you!
Here is the full code for my main website:
/*A completely irrelevant Rick-Roll code snippet. Activates after entering the Konami code. UP, UP, DOWN, DOWN, LEFT, RIGHT, LEFT, RIGHT, B, A, ENTER*/
var rick = false;
var audio = new Audio('audio_file.mp3');
var kkeys = [],
konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0) {
$(document).unbind('keydown', arguments.callee);
if (rick == false) {
rick = true;
audio.play();
} else if (rick == true) {
rick = false;
audio.stop();
}
}
});/*Some font styling here:*/
@font-face {
font-family: Rusty;
src: url('BrushScriptStd.otf');
}
* {
font-family: Rusty;
font-weight: Lighter;
}
.background {
background-image: url(0.jpg);
background-attachment: fixed;
background-size: 100% auto;
background-color: f7f7f7;
background-repeat: no-repeat;
background-position: center top;
}
/*Start of menu styling code*/
.menubar {
height: 2.8vw;
opacity: 0.85;
background-color: #CCCCCC;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 50%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #3e3436;
}
/*...Code continues*/If you want to see the proper styling and layout, simply click here! This will showcase the website's design the way it was meant to be.