Question

当您将鼠标悬停在下拉菜单上时会显示，但它会显示在我创建的内容div后面。我尝试了一些z-index的东西，但它没有帮助。下面我有我的所有网站代码，但它不想正确显示。正确的版本位于：＆＃34; http://www.redstonegaming.com。＆＃34;非常感谢所有帮助！谢谢！

我的所有主要网站代码：

＆＃13;

/*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%;
}

＆＃13;

<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>

＆＃13;

getSupportFragmentManager()

＆＃13;

点击here！这将使主要风格正确显示。

Answer 1

删除.content的不透明度并将z-index添加到子菜单：

{{1}}

Answer 2

从.content＆amp;中删除不透明度.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%;
}

你会发现它正在发挥作用。

Answer 3

只需从内容类中删除不透明度。

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

Answer 4

将z-index添加到内容div

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

下拉菜单落后于内容＆＃39; DIV

4 个答案: