Charlie Coplestone Charlie Coplestone - 24 days ago 7
HTML Question

Issue with z-index and relative positioning on drop down menu?

I can't quite figure out why my drop down menu is hidden behind the div which contains the menu. I've tried positioning various elements relative and z-indexing the menu to a higher value than the div it's contained in but I've not had much luck.

My JS Fiddle link is here:

https://jsfiddle.net/Lj919ca6/

And the code for demonstrative purposes is here:

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
}


Any help appreciated greatly.

Answer

.container had overflow set to hidden that seems to be the culprit.

You have given two elements with overflow properties.

.container and #header, remove overflow and add the following css to main-header

min-height:200px; // depending on what you want the height to be.

Here is the code pen link : http://codepen.io/saa93/pen/qqdRZy

Comments