Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aris Constantinou
Aris Constantinou
2,687 Points

How can i create submenus inside flexbox navigation?

Well i created this website using mostly flexbox features and everything works fine at this point but i want to add 2 submenus when i hover over "homeappliances" but i can't understand how to do it...

Codepen: http://codepen.io/anon/pen/KzWrJv?editors=1100

index.html

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" href="css/framework.css">
     <link rel="stylesheet" href="css/responsive.css">
     <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
     <script src="js/custom.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">      
  <title>NK Electrical LTD</title>
 </head>
 <body>
     <div class="container">
         <div class="header">
             <div class="log"><a href="http://www.lifeofaris.se/index.html"><img src="img/nklogo.png"></a></div>
         </div>
         <div class="word"><a href="http://www.lifeofaris.se/flexboss.se"><p>ELECTRICAL LTD</p></a></div>
         <nav class="flex-nav">
         <ul>
             <li><a href="index.html"><span>Home</span></a></li>
             <li><a href="electrical.html"><span>Electrical Installations</span></a></li>
             <li><a href="lighting.html"><span>Lighting</span></a></li>
             <li><a href="appliances.html"><span>Home Appliances</span></a>
              <ul>
                 <li><a href="eleappliances.html"></a></li>
                 <li><a href="kitappliances.html"></a></li>
             </ul>
             </li>
             <li><a href="contact.html"><span>Contact</span></a></li>
             <li><a href="about.html"><span>About</span></a></li>
             <li class="social">
          <a href="https://www.facebook.com/nkelectricalltd/?fref=ts"target="_blank"><img src="img/fbicon.png"></a>
                  <a href="https://www.facebook.com/nkelectricalltd/?fref=ts"target="_blank"><img src="img/emergency.png"></a>
        </li>
             </ul>
         </nav>
<aside id="sticky-social">
    <ul>
        <li><a href="https://www.facebook.com/nkelectricalltd/?fref=ts" target="_blank"><span>Facebook</span></a></li>
    </ul>
</aside>
<div class="captioned-gallery">
    <figure class="slider">
        <figure>
            <img src="img/10%20(1).jpg" alt>
            <figcaption>Ginger 1080</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(2).jpg" alt>
            <figcaption>Ginger 1081</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(3).jpg" alt>
            <figcaption>Goccia Piccola</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(4).jpg" alt>
            <figcaption>Lamp Copia</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(5).jpg" alt>
            <figcaption>Lamp Papiro marr</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(6).jpg" alt>
            <figcaption>Lamp Papiro nero</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(7).jpg" alt>
            <figcaption>Lamp Tav Copia</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(8).jpg" alt>
            <figcaption>Penelope</figcaption>
        </figure>
        <figure>
            <img src="img/10%20(9).jpg" alt>
            <figcaption>Piantana</figcaption>
        </figure>
    </figure>
</div>
     <div class="primary">
  <ul>
      <li class="flex-item"><a href="http://www.lifeofaris.se/flexboss/electrical.html"><img src="img/electrical.png"><p>Electrical Installations</p></a></li>
      <li class="flex-item"><a href="http://www.lifeofaris.se/flexboss/lighting.html"><img src="img/lighting.png"><p>Lighting</p></a></li>
      <li class="flex-item"><a href="http://www.lifeofaris.se/flexboss/eleappliances.html"><img src="img/homeappliances1.png"><p>Electrical Appliances</p></a></li>
      <li class="flex-item"><a href="http://www.lifeofaris.se/flexboss/kitappliances.html"><img src="img/homeappliances2.png"><p>Kitchen Appliances</p></a></li>
  </ul>
</div>
<div class="secondary">
  <h1>Our recent news</h1>
  <ul>
      <li class="flex-item"><img src="img/1.jpg"></li>
      <li class="flex-item"><img src="img/2.jpg"></li>
      <li class="flex-item"><img src="img/3.jpg"></li>
      <li class="flex-item"><img src="img/4.jpg"></li>
  </ul>
</div>
         <footer class="footer"><p>&copy; NK ELECTRICAL LTD 2016. ALL RIGHTS RESERVED</p></footer>
     </div>
 </body>
</html>

Framework.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a{text-decoration: none;}
ul{list-style: none;}
body{font-family: 'Electrolize', sans-serif;font-size: 16px;}
.container{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.word{text-align: center;}
.slider img{max-width: 100%;}
.primary ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}
.primary li{
   padding: 0;
    background-color: #1c1c1c;
    color: #bdc3c7;font-size: 1em;margin:0.9%; -webkit-box-flex:0; -webkit-flex:0 1 48.2%; -ms-flex:0 1 48.2%; flex:0 1 48.2%;width:140px;background-color: #1c1c1c;color: #bdc3c7;-webkit-transition-property: background-color ease-in-out;transition-property: background-color ease-in-out;
-webkit-transition-duration: 1.2s;
        transition-duration: 1.2s;}
    .primary img{padding: 10%;}
    .primary p{
    font-size:1.3em;
    padding:6%;
  background-color: #483636;
  color: #bdc3c7;
  text-align:center;
}
.secondary li{-webkit-box-flex:0;-webkit-flex:0 1 48.2%;-ms-flex:0 1 48.2%;flex:0 1 48.2%;}
#sticky-social {
   right: 0;
   position: fixed;
   top: 150px;
}
.secondary h1{margin-top:1%;}
#sticky-social a {
   background-color: #3b5998;
   background-image: url(../img/fbicon.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   color: #fff;
   display: block;
   height: 35px;
   line-height: 35px;
   position: relative;
   text-align: center;
   width: 35px;
}
#sticky-social a span {
   line-height: 35px;
   right: -120px;
   position: absolute;
   text-align:center;
   width:120px;
    -webkit-transition-property: right ease-in-out;
    transition-property: right ease-in-out;
    -webkit-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-transition-delay: .2s;
            transition-delay: .2s;
}
#sticky-social a:hover span {
   right: 100%;
    background-color: #3b5998;
}
.captioned-gallery{margin:0 auto;
  width: 78%; height:350px; overflow: hidden; 
}
.imagecontainer, .kitgallery, .brand{width:78%;} /*Primary Width*/
figure.slider { 
  position: relative; width: 500%;
  font-size: 0; -webkit-animation: 30s slidy infinite; animation: 30s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: 350px; }
figure.slider figure figcaption { 
  position: absolute; bottom:0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem; 
}
.social a{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
@-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%;}
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%;}
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
.primary li:hover{
        background-color:#496274;
    }
.primary p{
  background-color: #483636;
  color: #bdc3c7;
  text-align:center;}
.primary img{width:100%;height: auto;}
.secondary{background-color:#1c1c1c;}
.secondary ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}
.secondary li{-webkit-box-flex:0;-webkit-flex:0 1 46%;-ms-flex:0 1 46%;flex:0 1 46%;width:140px;margin:2%;}
.secondary img{width:100%;height:auto;border: 2px solid white;}
.secondary h1{color:white;text-align: center;}
.flex-item{width:50%;text-align: center;}
.flex-nav{background-color: black; margin: 0 auto;margin-bottom: 1%;}
.flex-nav ul{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.flex-nav a{
    color:white;
    display: block;
    font-size: 1.125em;
    font-weight: 300;
    text-align: center;
    padding: .4em;
    -webkit-transition-property: background-color ease-in;
    transition-property: background-color ease-in;
    -webkit-transition-duration: 1s;
            transition-duration: 1s;}
.flex-nav a:hover{
    background-color: #8fcdf8;
}
.flex-nav li{
    text-align: center;
    margin: 0 auto;
    -webkit-flex-basis:500px;
        -ms-flex-preferred-size:500px;
            flex-basis:500px;
}
.flex-nav a:hover {
    color: #0b0b0b;
    border-bottom-color: #52bab3;
}
.flex-nav li ul{display: none;list-style: none;position: absolute;margin: 0;padding: 0;}
.flex-nav li:hover ul{display: flex;flex-direction: row;}
.header{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin: 0 auto;text-align: center;}
.header img{width:100%; width: 200px;height: auto;}
.log img{width:100px;height: auto; margin: 0 auto;}
.social{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-webkit-flex-direction: row wrap;-ms-flex-direction: row wrap;flex-direction: row wrap;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
.social a{width:100%;}
.footer{padding:1%;background-color: black;}
.footer p{color:white;text-align: center;font-size: 1em;}
.captioned-gallery, .imagecontainer, .kitgallery, .brand{min-width:100%;} /*So they can be at its full on mobile*/
.word a{color: black;}
.info{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;margin: 0 auto;margin-bottom: 1%;}
.phone, .email{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.phone p, .email p{font-size: 1.2em;}
.phoneimg{width:40px; height:auto;margin:3% 3% 3% 5%;}
.emailimg{width:60px; height: auto;margin: 3%;}
.imagecontainer, .kitgallery, .brand{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;margin: 0 auto;margin-bottom: 1%;}
.imagecontainer img{flex:1 1 30%;height:200px;margin: 0.9% 1%;}
.kitgallery img{flex:1 1 30%; height:70px;margin:0.9% 0.1%;}
.water img{flex:1 1 600px; height:400px;}
.brand{background-color: black;display: flex;}
.brand p{color:white;font-size:2em;}

Responsive.css

@media screen and (min-width: 655px) {
    .word{margin-bottom:2%;}
    .primary ul{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}
    .primary li{ -webkit-box-flex: 1; -webkit-flex: 1 1 0; -ms-flex: 1 1 0; flex: 1 1 0; min-width: 40%;padding: 0;
    background-color: #1c1c1c;
    color: #bdc3c7;font-size: 1.2em;margin:0.9%; }
    .primary img{padding: 10%;}
    .primary p{
    font-size:1.3em;
    padding:6%;
    background-color: #483636;
    color: #bdc3c7;
    text-align:center;}
    .secondary li{-webkit-box-flex: 1;-webkit-flex: 1 1 0;-ms-flex: 1 1 0;flex: 1 1 0; min-width: 40%;}
    .flex-nav li{-webkit-box-flex: 1;-webkit-flex: auto;-ms-flex: auto;flex: auto;-webkit-align-self: center;-ms-flex-item-align: center;align-self: center;}
    .flex-nav a{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;font-size:1.5em;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;height:70px;}
    .flex-nav span{display: block;width:100%;}
    .primary {min-width:90%; margin:0 auto;}
    .secondary{min-width:88.5%; margin:0 auto;}
    .captioned-gallery {min-width: 88.3%;}
    .imagecontainer{min-width:90.4%;}
    .brand{min-width:88.7%;}
    .kitgallery{min-width:88.6%; }
    .footer{min-width:88.6%;margin: 0 auto;}
    .secondary h1{margin-top:1%;}
    .info{min-width: 81.6%;}
    .log img{width:100px;height: 100px;margin: 0 auto;}
}
@media screen and (min-width:740px){
    .primary{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
    .primary ul{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-webkit-flex: auto;-ms-flex: auto;flex: auto; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row;}
    .primary li{min-width: 23%;}
    .secondary{min-width: 88.5%;}
    .secondary ul{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-flex-flow: row;-ms-flex-flow: row;flex-flow: row;}
    .secondary li{min-width:20%;}
    .flex-nav{-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;width:88.5%;}
    .primary li{
    padding: 0;
    min-width: 0%;
    background-color: #1c1c1c;
    color: #bdc3c7;font-size: 0.9em;margin:0.9%;}
    .primary img{padding: 10%;}
    .primary p{
    font-size:1.1em;
    padding:6%;
    background-color: #483636;
    color: #bdc3c7;
    text-align:center;}
    .secondary h1{margin-top:1%;}
    .info{min-width: 88.6%;}
    .log img{width:50%;height: 100px;margin: 0 auto;}
}
@media screen and (min-width: 1290px){
    .container{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-flow: column wrap;-ms-flex-flow: column wrap;flex-flow: column wrap;max-width:1290px;margin: 0 auto;}
    body{font-family: 'Electrolize', sans-serif;font-size: 16px;}
    .header{width:78%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
    .header img{width:60px;}
    .log{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
    .log img{width:100px;height: 100px;margin: 0 auto;}
    .word{text-align: center;font-size:1.3em;width:13%;margin: 0 auto;margin-bottom: 2%;}
    .emer{text-align: right;-webkit-align-self: center;-ms-flex-item-align: center;align-self: center;margin:0 auto;}
    .emer img{width:20%; height:60px;}
    .captioned-gallery {margin:0 auto;
    min-width: 78%; height:350px; overflow: hidden; }
    .imagecontainer{min-width: 79.6%;}
    .brand{min-width:0%;}
    .kitgallery{min-width: 78%;}
    .flex-item {
    padding: 5px;
    width: 200px;
    margin-top: 10px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;}
    .flex-nav{width:78%;}
    .flex-nav ul{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;margin:0 auto;padding:0;list-style:none;}
    .flex-nav li{-webkit-box-flex:1;-webkit-flex:auto;-ms-flex:auto;flex:auto;text-align: center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
    .flex-nav a{-webkit-flex-basis: 100%;-ms-flex-preferred-size: 100%;flex-basis: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;font-size:1.5em;}
    .flex-nav span{display: block;width:100%;}
    .fa-facebook{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
    .primary {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    min-width:80%;}
    .primary li{
    padding: 0;
    min-width: 0%;
    background-color: #1c1c1c;
    color: #bdc3c7;font-size: 1.1em;margin:1.2%;}
    .primary img{padding: 10%;}
    primary p{
    font-size:0.5em;
    padding:6%;
    background-color: #483636;
    color: #bdc3c7;
    text-align:center;}
    .secondary{
    -webkit-align-self:center;
        -ms-flex-item-align:center;
            align-self:center;
    min-width:78%;
    background-color:#1c1c1c;
    margin-bottom:1em;}
    .secondary li{margin:1.2%;min-width: 0%;}
    .secondary img{border: 2px solid white;}
    h1{margin-top:1%;width: 100%; color:white;text-align: center;}
    .footer{padding:1%;min-width:78%;margin:0 auto;}
    .info{min-width: 78%;margin: 0 auto;}
}

1 Answer

Malorie E Souser
Malorie E Souser
7,503 Points
Malorie E Souser
Malorie E Souser
7,503 Points

As someone who has just started using flexbox (and loves it!), I wanted to know the answer to your question too. So, I did a little digging and found this lovely resource on CodePen:

Flexbox Dropdown Navigation Menu

It's a tutorial with HTML and CSS files illustrating how to create a dropdown menu using flexbox. By using it as a guide, it might help you create your submenus, however, it might require a little reordering of your code.

Hope this helps. Good luck!