title: Add a sub-menu to a pre-existing navigation with CSS
body: <p>I have a pre-existing responsive menu but I need to add a sub-navigation for each menu choice. How can I do this with CSS?</p>
  
  <p>The important code, I think, is in the section <em>primary navigation</em>.</p>
  
  <p>Thank you in advance for everyone that can help me to understand how sub-menus work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/** 
  /* 06. =header styles
  /* =================================================================== */
  
  html,
  body {
   height: 100%;
  }
  
  body {
   background: #0F1215;
   font: 16px/30px "merriweather-regular", serif;
   font-weight: normal;
   color: #575859;
  }
  
  
  header {
   height: 66px;
   width: 100%;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 600;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;  
  
   
  }
  header.opaque {
   background: black;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* header logo */
  header .logo {
   background: #fdc501;
   float: left;
   width: auto;
   margin-left: 15px;
   margin-right: 30px;
   z-index: 600;    
   
   /* add position relative since z-index only applies to  
   elements that have been given an explicit position */
   position: relative;
  }
  
  header .logo a {
   display: block;
   margin: 0;
   padding: 0;
   border: none;
   font: 0/0 a;
   text-shadow: none;
   color: transparent;
   width: 114px;
   height: 66px;
   background: url("../images/logoK@2x.png") no-repeat center;
   background-size: 61px 14px;
  }
  
  /* header social */
  header .header-social {
   font-size: 20px;
   font-weight: normal;
   line-height: 66px;
   margin-top: 0;
   margin-left: 30px;
   padding-left: 36px;
   border-left: 1px solid rgba(150, 150, 150, 0.2);
   float: left;
   position: relative;
   top: -1px;
  }
  
  header .header-social li {
   display: inline-block;
   margin-right: 15px;
  }
  
  header .header-social li a {
   color: #FFFFFF;
  }
  
  header .header-social li a:hover {
   color: #fdc501;
  }
  
  /* media queries:  
  /* header/header components */
  @media only screen and (max-width:880px) {
   header .header-social {
    display: none;
   }
  
  }
  
  @media only screen and (max-width:768px) {
   header {
    background: black;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
  
   header .row {
    width: 100%;
   }
  
   header .logo {
    margin-left: -30px;
   }
  
  }
  
  /* primary navigation
  --------------------------------------------------------------------- */
  #nav-wrap,
  #nav-wrap ul,
  #nav-wrap li,
  #nav-wrap a {
   margin: 0;
   padding: 0;
  }
  
  /* nav-wrap */
  #nav-wrap {
   font: 13px "raleway-heavy", sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;  
  }
  
  /* hide toggle button */
  #nav-wrap &gt; a {
   display: none;
  }
  
  ul#nav {
   min-height: 66px;
   display: inline-block;
   width: auto;  
  
   /* left align the menu */
   text-align: left;
  }
  
  ul#nav li {
   position: relative;
   list-style: none;
   display: inline-block;
   height: 66px;    
  }
  
  /* Links */
  ul#nav li a {
  
   /* 14px padding top + 14px padding bottom + 38px line-height = 66px */
   display: block;
   padding: 14px 12px;
   line-height: 38px;
   text-decoration: none;
   text-align: left;
   color: #FFFFFF;
   position: relative;
   -moz-transition: color 0.2s ease-in-out;
   -o-transition: color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out;
   transition: color 0.2s ease-in-out;
  }
  
  ul#nav li a:hover {
   color: #fdc501;
  }
  
  ul#nav li a:active {
   background-color: transparent !important;
  }
  
  ul#nav li.current a {
   color: #fdc501;
  }
  
  ul#nav li.current a:after {
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 40px;
   height: 2px;
   margin-left: -23px;
   background-color: white;
   content: '\0020';
   display: block;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
  }
  
  /* mobile navigation 
  --------------------------------------------------------------------- */
  @media only screen and (max-width:768px) {
   #nav-wrap {
    z-index: 700;
    display: block;
    width: 100%;
    float: none;
    position: absolute;
    top: 0;
    right: 0;
   }
  
   /* mobile-btn and toggle-btn */
   #nav-wrap &gt; a {
    border: none;
    color: #FFFFFF;
    height: 40px;
    min-width: 40px;
    font-size: 12px;
    text-align: left;
    float: right;
    display: block;
    padding: 0;
    position: relative;
    top: 13px;
    right: 20px;
   }
  
   #nav-wrap &gt; a:hover .menu-icon {
    background: #FFFFFF;
   }
  
   #nav-wrap .menu-icon {
    display: inline-block;
    width: 24px;
    height: 3px;
    margin-top: -3px;
    position: absolute;
    right: 8px;
    top: 50%;
    bottom: auto;
    left: auto;
    background: #fdc501;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
   }
  
   #nav-wrap .menu-icon:before,
   #nav-wrap .menu-icon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
   }
  
   #nav-wrap .menu-icon:before {
    bottom: 8px;
   }
  
   #nav-wrap .menu-icon:after {
    top: 8px;
   }
  
   /* dropdown nav */
   #nav-wrap ul#nav {
    background: #1c212a;
    padding: 54px 45px 60px 45px;
    margin: 0;
    height: auto;
    display: none;
    clear: both;
    width: 100%;
    float: none;
    position: absolute;
    top: 66px;
    right: 0;
   }
  
   #nav-wrap ul#nav &gt; li {
    display: block;
    float: none;
    height: auto;
    text-align: left;
    border-bottom: 1px dotted rgba(200, 200, 200, 0.1);
    padding: 6px 0;
   }
  
   #nav-wrap ul#nav &gt; li:first-child {
    border-top: 1px dotted rgba(200, 200, 200, 0.1);
   }
  
   #nav-wrap ul#nav li a {
    display: block;
    width: auto;
    padding: 0;
    color: #cacbcb;
    padding: 12px 0;
    line-height: 16px;
    border: none;
   }
  
   #nav-wrap ul#nav li a:hover {
    color: #FFFFFF;
   }
  
   #nav-wrap ul#nav li.current &gt; a {
    background: none;
    color: #fdc501;
   }
  
   #nav-wrap ul#nav li.current &gt; a:after {
    display: none;
   }
  
   #nav-wrap a.mobile-btn {
    display: none;
   }
  
   .js #nav-wrap a#toggle-btn {
    display: block;
   }
  
   /* if js is disabled */
   .no-js #nav-wrap:not(:target) &gt; a:first-of-type,
   .no-js #nav-wrap:target &gt; a:last-of-type {
    display: block;
   }
  
   .no-js #nav-wrap:target ul#nav {
    display: block;
   }
  
  }
  
  /* make sure the menu is visible on larger screens
  --------------------------------------------------------------------- */
  @media only screen and (min-width:769px) {
   #nav-wrap ul#nav {
    display: block !important;
   }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;header id="main-header"&gt;
  
      &lt;div class="row"&gt;
  
         &lt;div class="logo"&gt;
            &lt;a href="index.html"&gt;SAT | Aloia Evelina&lt;/a&gt;
         &lt;/div&gt;
  
         &lt;nav id="nav-wrap"&gt;         
            
            &lt;a class="mobile-btn" href="#nav-wrap" title="Show navigation"&gt;
             &lt;span class="menu-icon"&gt;Menu&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="mobile-btn" href="#" title="Hide navigation"&gt;
             &lt;span class="menu-icon"&gt;Menu&lt;/span&gt;
            &lt;/a&gt;            
  
            &lt;ul id="nav" class="nav"&gt;
               &lt;li&gt;&lt;a class="smoothscroll" href="#hero"&gt;Home.&lt;/a&gt;&lt;/li&gt;
             &lt;li class="current"&gt;&lt;a class="smoothscroll" href="#portfolio"&gt;Works.&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a class="smoothscroll" href="#services"&gt;Services.&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a class="smoothscroll" href="#about"&gt;About.&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a class="smoothscroll" href="#contact"&gt;Contact.&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt; &lt;!-- end #nav --&gt;
  
         &lt;/nav&gt; &lt;!-- end #nav-wrap --&gt;
  
         &lt;ul class="header-social"&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;      
  
      &lt;/div&gt;
  
     &lt;/header&gt; &lt;!-- end header --&gt;</code></pre>
  </div>
  </div>
  </p>