Robert Robert - 4 months ago 9
HTML Question

Sub Navigation drop down problems

Im creating a navigation with three levels of sub navigation elements.

At the moment its working fine when you get to the third level but it is only displaying one subcategory where I want it to display multiple sub categories.

Im unsure as to why its not showing this up and must be a problem with the way I have designed and developed it.

I have included a JS Fiddle here https://jsfiddle.net/e52u02bL/4/

HTML

<body>
<div class="nav">
<ul class="nav-primary test">
<li><a href="#">Household</a>
<ul class="test">
<li><a href="#">Living Room</a></li>
<li><a href="#">Bedroom</a></li>
<li><a href="#">Living Room</a>
<ul class="thrdLvl">
<li><h4>Heading</h4></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
</ul>
<ul class="thrdLvl">
<li><h4>Heading</h4></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Hardware</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Wedding List</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

</body>


CSS

.nav {
width: 100%;
background: #FFF;
padding: 0;
margin: 0;
position:relative;
}

.nav ul {
background: #FFF;
list-style:none;
padding:0 20px;
margin: 0;

}

ul.test li {
display: inline-block;
}

.nav ul li a {
color:#333333;
display:block;
padding:0px 40px;
text-decoration:none;
float: left;
height: 60px;
line-height: 60px;
}

.nav ul li:hover {
background: #3B95D3;
}


.nav ul li:hover > a{
color:#FFFFFF;
}

.nav ul li:hover > ul {
display:block;
}

.nav ul ul {
background: #FFF;
padding:0;
display:none;
width: 100%;
position: absolute;
top: 60px;
left: 0px;
}

.nav ul ul ul {
background: #3B95D3;
display:none;
width: 100%;
position: absolute;
top: 60px;
left: 0px;
}

.nav ul > li > ul > li > ul > li {
background-color:red;
padding-top:;
width: 33.33333%;
}


div > h4 {color:#FFF; padding-left: 38px;}

ul.thrdLvl > li{
display:block;
max-width:100px;
}

@media screen and (max-width: 480px) {
.nav{
width: 100%;
float: none;
padding: 0 2em;
}

.nav ul {
width: 100%;
}

.nav ul li {
width: 100%;
}

}


Many Thanks,

Robert.

Answer

I believe the issue is absolute positioning (the third layers were imposing themselves on top of one another). In absolute positioning, there is no floating of elements. As a result, you generally have to specify an offset left to achieve your required affect. Perhaps this example here:

https://jsfiddle.net/domslee/e52u02bL/21/

CSS:

.nav ul ul {
  left: 0px; /*Removing this fixes aligning issue*/
}
.nav ul ul ul {
  background: #3B95D3;
  display:none;
  width: 200px;
  position:absolute;
  top: 60px;
  left: 0px;
}

.nav ul ul ul:nth-child(2) { /*Using n-th child to specify offset for second child*/
  left: 200px;
}