CODEWITHSUNDEEP
jqueryhtmlcssnavigation
Robert
Robert

Reputation: 25

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.

Upvotes: 1

Views: 44

Answers (1)

Dom Slee
Dom Slee

Reputation: 611

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

Upvotes: 1

Related Questions