Add a sub-menu to a pre-existing navigation with CSS - css

Question

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?
The important code, I think, is in the section primary navigation.
Thank you in advance for everyone that can help me to understand how sub-menus work.
/**
/* 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 > 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 > 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 > 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 > 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 > 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 > a {
background: none;
color: #fdc501;
}
#nav-wrap ul#nav li.current > 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) > a:first-of-type,
.no-js #nav-wrap:target > 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;
}
}
<header id="main-header">
<div class="row">
<div class="logo">
SAT | Aloia Evelina
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">
<span class="menu-icon">Menu</span>
</a>
<a class="mobile-btn" href="#" title="Hide navigation">
<span class="menu-icon">Menu</span>
</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll" href="#hero">Home.</a></li>
<li class="current"><a class="smoothscroll" href="#portfolio">Works.</a></li>
<li><a class="smoothscroll" href="#services">Services.</a></li>
<li><a class="smoothscroll" href="#about">About.</a></li>
<li><a class="smoothscroll" href="#contact">Contact.</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
<ul class="header-social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</div>
</header> <!-- end header -->

Answer 1

<ul id="nav" class="nav">
<li><a class="smoothscroll" href="#hero">Home.</a>
<ul>
<li>#item1</li>
<li>#item1</li>
</ul>
</li>
<li class="current"><a class="smoothscroll" href="#portfolio">Works.</a>
<ul>
<li>#item1</li>
<li>#item1</li>
</ul>
</li>
<li><a class="smoothscroll" href="#services">Services.</a>
<ul>
<li>#item1</li>
<li>#item1</li>
</ul>
</li>
<li><a class="smoothscroll" href="#about">About.</a>
<ul>
<li>#item1</li>
<li>#item1</li>
</ul>
</li>
<li><a class="smoothscroll" href="#contact">Contact.</a>
<ul>
<li>#item1</li>
<li>#item1</li>
</ul>
</li> </ul>
in your html file you code should look something like this.
and then for more details on how you can style your code you can visit the site https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
It provides some tricks in which you can style your menu as well as I how the html file should look like. I find it very much helpfull.