I know others have asked this question and I'm not able to wrap my head around those solutions due to the complexity of the CSS being used and I have submenus within. This was made by an online menu CSS generator. This is the page that I'm building:
http://sandboxisle.com/home-page-main/
#menu {
background: #00338D;
color: #FFF;
height: 45px;
padding-left: 18px;
border-radius: 10px;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 45px;
padding: 0 14px;
text-decoration: none;
color: #EBB700;
font-size: 16px;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #FFFFFF;
background: #00338D;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 45px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 45px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 250px;
background: #766A62;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #EBB700;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #766A62;
color: #ffffff;
}
@media screen and (max-width: 800px){
#menu {position:relative}
#menu ul {background:#766A62;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.sub-menus {width:100%;position:static;}
#menu ul.sub-menus a {padding-left:30px;}
#menu li {display:block;float:none;width:auto;}
#menu input, #menu label {position:absolute;top:0;left:0;display:block}
#menu input {z-index:4}
#menu input:checked + label {color:white}
#menu input:checked + label:before {content:"\00d7"}
#menu input:checked ~ ul {display:block}
}
Here's my HTML
<nav id='menu'>
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='Calendar'>Calendar</a></li>
<li><a href='News'>News</a></li>
<li><a class='dropdown-arrow' href='For Members'>For Members</a>
<ul class='sub-menus'>
<li><a href='Orientation'>Orientation</a></li>
<li><a href='Leadership Building'>Leadership Building</a></li>
<li><a href='Newsletters'>Newsletters</a></li>
</ul>
</li>
<li><a class='dropdown-arrow' href='Resource'>Resource</a>
<ul class='sub-menus'>
<li><a href='Service Documents'>Service Documents</a></li>
<li><a href='District 50 Clubs Directory'>District 50 Clubs Directory</a></li>
<li><a href='Awards & Contests'>Awards & Contests</a></li>
<li><a href='D50 Resource'>D50 Resource</a></li>
<li><a href='Club Resource'>Club Resource</a></li>
<li><a href='LCIF Resource'>LCIF Resource</a></li>
</ul>
</li>
</ul>
</nav>
Please check the code below:
#menu {
background: #00338d;
color: #fff;
height: 45px;
padding-left: 18px;
border-radius: 10px;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu li {
padding: 0;
list-style: none;
}
#menu .navbar {
display: flex;
justify-content: end;
width: 1170px;
margin: 0 auto;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 45px;
padding: 0 14px;
text-decoration: none;
color: #ebb700;
font-size: 16px;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #ffffff;
background: #00338d;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 45px;
width: 100%;
opacity: 0;
cursor: pointer;
}
#menu label {
display: none;
line-height: 45px;
text-align: center;
position: absolute;
left: 35px;
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus {
height: auto;
overflow: hidden;
width: 250px;
background: #766a62;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #ebb700;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block;
}
#menu ul.sub-menus a:hover {
background: #766a62;
color: #ffffff;
}
@media screen and (max-width: 800px) {
#menu {
position: relative;
}
#menu ul {
background: #766a62;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 3;
height: auto;
display: none;
}
#menu ul.sub-menus {
width: 100%;
position: static;
}
#menu ul.sub-menus a {
padding-left: 30px;
}
#menu li {
display: block;
float: none;
width: auto;
}
#menu input,
#menu label {
position: absolute;
top: 0;
left: 0;
display: block;
}
#menu input {
z-index: 4;
}
#menu input:checked + label {
color: white;
}
#menu input:checked + label:before {
content: "\00d7";
}
#menu input:checked ~ ul {
display: block;
}
}<nav id="menu">
<input
type="checkbox"
id="responsive-menu"
onclick="updatemenu()"
/><label></label>
<ul class="navbar">
<li><a href="Calendar">Calendar</a></li>
<li><a href="News">News</a></li>
<li>
<a class="dropdown-arrow" href="For Members">For Members</a>
<ul class="sub-menus">
<li><a href="Orientation">Orientation</a></li>
<li><a href="Leadership Building">Leadership Building</a></li>
<li><a href="Newsletters">Newsletters</a></li>
</ul>
</li>
<li>
<a class="dropdown-arrow" href="Resource">Resource</a>
<ul class="sub-menus">
<li><a href="Service Documents">Service Documents</a></li>
<li>
<a href="District 50 Clubs Directory"
>District 50 Clubs Directory</a
>
</li>
<li><a href="Awards & Contests">Awards & Contests</a></li>
<li><a href="D50 Resource">D50 Resource</a></li>
<li><a href="Club Resource">Club Resource</a></li>
<li><a href="LCIF Resource">LCIF Resource</a></li>
</ul>
</li>
</ul>
</nav>