0
メニューを含むdivの下に私のドロップダウンメニューがなぜ隠れているのかよく分かりません。私はさまざまな要素を相対的な位置に配置しようとしましたが、メニューに含まれるdivよりも高い値にメニューをインデックス付けしましたが、運があまりありませんでした。ドロップダウンメニューのZ-インデックスと相対的な位置付けに問題がありますか？
私のJSフィドルのリンクはこちらです：
https://jsfiddle.net/Lj919ca6/
と実証の目的のためのコードはここにある：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<title>Header 1</title>
</head>
<body>
<header id="header">
<div id="action-bar">
<div class="container">
<div>
<p class="ab-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul class="ab-ul top-bar-links">
<li>We Can Help</li>
<li>Something Random</li>
<li>More Random</li>
</ul>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div>
<img class="logo" src="logo.png">
</div>
<div class="main-nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a>
<ul>
<li><a href="#">Deep Menu 1</a>
<ul>
<li><a href="#">Sub Deep 1</a></li>
<li><a href="#">Sub Deep 2</a></li>
<li><a href="#">Sub Deep 3</a></li>
<li><a href="#">Sub Deep 4</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li class="dir"><a href="#">Sub Menu 1</a></li>
<li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<img src="gentleman.jpg" />
</body>
</html>
はCSS：
body{
margin:0;
}
p{
font-family: 'Abel', sans-serif;
-webkit-margin-before: 2px;
-webkit-margin-after: 2px;
}
a{
font-family: 'Abel', sans-serif;
}
li{
font-family: 'Abel', sans-serif;
}
ul{
list-style: none outside;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
ul li{
color:white;
display: inline-block;
margin-right: 6px;
padding-right: 6px;
border-right: 1px solid rgba(255,255,255,.1);
}
#header{
position: relative;
}
#action-bar{
left: 0;
top: 0;
width: 100%;
z-index: 30;
background: #242b33;
height:45px;
}
.container{
max-width: 1220px;
margin:0 auto;
position:relative;
overflow: hidden;
}
.ab-p{
color:#fff;
float:left;
padding:10px;
}
.top-bar-links{
float: right;
padding:10px;
}
.main-header{
position: static;
width: 100%;
background-color: #0c141d;
display:block;
overflow:auto;
}
.logo{
float: left;
width:300px;
height:auto;
}
.main-nav{
float:right;
}
#primary_nav_wrap ul
{
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
z-index: 201;
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
大きな助力をいただきました。
は。 –