下拉菜單落在「內容」後面div

當您將鼠標懸停在下拉菜單上時，它會出現，但它出現在我創建的內容div的後面。我試過一些Z-index的東西，它沒有幫助。下面我有我所有的網站代碼，但它不想正確顯示。正確的版本是：「http://www.redstonegaming.com」。所有幫助非常感謝！謝謝！下拉菜單落在「內容」後面div

我所有的主要網站代碼：

/*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> 
 
\t \t </div> 
 
\t </body> 
 
</html>

點擊here！這將有主要風格顯示正確。

來源

2015-12-11 Nicholas Johnson

刪除。內容的不透明度和z索引添加到子菜單：

.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; 
}

來源

2015-12-11 04:08:24 Ravneet

這工作，但我怎麼能保持不透明度爲85％？ –

這工作，但我怎麼能保持85％的不透明度的內容div？去這裏看看[鏈接]（http://redstonegaming.com） –

從。內容& .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%; 
}

刪除不透明度，你會發現它的工作。

來源

2015-12-11 04:05:53

我怎能不透明度爲85％？ –

請參閱鏈接http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div –

單從內容類別中刪除不透明度。

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

來源

2015-12-11 04:17:22 shishir

這工作，但我怎麼能保持在85％的不透明度？ –

附加z-index的內容DIV

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

來源

2015-12-11 04:17:47 Sudeep

這工作，但我怎樣才能保持在85％的不透明度？ –

下拉菜單落在「內容」後面div

回答

相關問題