CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nicholas Johnson
Nicholas Johnson

Reputation: 1022

Dropdown menu is dropping behind 'content' div

When you hover over the dropdown menu, it appears, but it appears behind the content div that I have created. I've tried some z-index stuff and it didn't help. Below I have all of my website code, but it doesn't want to display properly. The correct version is at: "http://www.redstonegaming.com." All help is greatly appreciated! Thank you!

All of my main website code:

/*Totally irrelavent Rick-Roll code. Starts after Konami code is entered.
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 Fonts 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 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;
}
.menu {
  width: 100%;
  margin: 0px auto;
  text-align: center;
}
.menu li {
  margin: 0px;
  list-style: none;
  font-family: 'Ek Mukta';
}
.menu a {
  transition: all linear 0.15s;
  color: #919191;
}
.menu li:hover > a,
.menu .current-item > a {
  text-decoration: none;
  color: rgba(189, 34, 34, 1);
}
.menu .arrow {
  font-size: 0.95vw;
  line-height: 0%;
}
.menu > ul > li {
  float: middle;
  display: inline-block;
  position: relative;
  font-size: 1.2vw;
}
.menu > ul > li > a {
  padding: 0.7vw 5vh;
  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;
}
.menu li:hover .sub-menu {
  opacity: 1;
}
.sub-menu {
  width: 100%;
  padding: 0px 0px;
  position: absolute;
  top: 100%;
  left: 0px;
  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: 1.2vw;
}
.sub-menu li a {
  padding: 10px 10px;
  display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
  background: #3e3436;
}
/*End of menu code*/

.Rusty {
  font-family: "Rusty";
  color: rgba(189, 34, 34, 1);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0px 13px 21px rgba(0, 0, 0, 0.35);
}
.content {
  margin: auto;
  width: 80%;
  background-color: #CCCCCC;
  opacity: 0.85;
  padding: 10px;
  height: 100%;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://s.ytimg.com/yts/cssbin/www-subscribe-widget-webp-vflj9zwo0.css" name="www-subscribe-widget">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="script.js"></script>
  <link rel="shortcut icon" href="favicon.ico">
  <title>RG - Home</title>
</head>

<body class="background">
  <div class="menubar">
    <nav class="menu">
      <ul class="clearfix">
        <li>
          <a href="aboutme.html">About Me <span class="arrow">&#9660;</span></a>
          <!--Here is the dropdown menu-->
          <ul class="sub-menu">
            <li><a href="#">Gaming</a>
            </li>
            <li><a href="#">Programming</a>
            </li>
            <li><a href="#">YouTube</a>
            </li>
            <li><a href="#">Other</a>
            </li>
          </ul>
          <!----------------------->
        </li>
        <li><a href="schedule.html">Schedule</a>
        </li>
        <li class="current-item">
          <a href="#">
            <p class="rusty">RedstoneGaming</p>
          </a>
        </li>
        <li><a href="equipment.html">Equipment</a>
        </li>
        <li><a href="contact.html">Contact Me</a>
        </li>
    </nav>
  </div>
  <div class="content">
    <div style="height: 7vh;" align="center">
      <h1 style="font-size: 3vw;" class="rusty">Colortone | Am I colorblind?! | W/Voiceless </h1>
      <iframe style="height:300%; width:auto;" src="https://www.youtube.com/embed/-egJP-2ShRk?controls=2 align=" center "></iframe></div>
		</div>
	</body>
</html>

Click here! This will have the main style showed correctly.

Upvotes: 0

Views: 140

Answers (4)

Rav
Rav

Reputation: 300

Remove opacity of .content and add z-index to sub-menu:

.content {
    background-color: #cccccc;
    height: 100%;
    margin: auto;
    /*opacity: 0.85;*/
    padding: 10px;
    width: 80%;
}

.sub-menu {
    background: #2e2728 none repeat scroll 0 0;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    left: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    transition: opacity 0.15s linear 0s;
    width: 100%;
    z-index: 999999;
}

Upvotes: 1

Sudeep
Sudeep

Reputation: 35

add z-index to content div

.content{ position: relative; z-index: -1; }

Upvotes: 0

shishir
shishir

Reputation: 851

Just remove the opacity from the content class.

.content {
  margin: auto;
  width: 80%;
  background-color: #CCCCCC;
  //opacity: 0.85;
  padding: 10px;
  height: 100%;
}

Upvotes: 0

Parth Patel
Parth Patel

Reputation: 824

Remove opacity from .content & .menubar

.menubar {
    height: 2.8vw;
    /* opacity: 0.85; */
    background-color: #CCCCCC;
}

.content {
    margin: auto;
    width: 80%;
    background-color: #CCCCCC;
    /* opacity: 0.85; */
     padding: 10px;
    height: 100%;
}

you will find it's working.

Upvotes: 0

Related Questions