Adding A Submenu on Systeme.io with HTML\/CSS

Learn how to implement a submenu on Systeme.io using custom HTML/CSS code.

Use the code below to create your own submenu as mentioned in the video above.

COPY AND PASTE CODE BELOW:

<style>

a {

text-decoration: none;

}

nav {

font-family: Sans-serif;

float: right;

}

ul {

list-style: none;

margin: 0;

padding-left: 0;

}

li {

color: #fff;

display: block;

float: left;

padding: 1rem;

position: relative;

text-decoration: none;

transition-duration: 0.5s;

}

/*Text Color*/

li a {

color: #ffffff;

}

/*Hover Color*/

li:hover,

li:focus-within {

background: orange;

cursor: pointer;

}

li:focus-within a {

outline: none;

}

/*Inner submenu styling*/

ul li ul {

z-index: 50;

visibility: hidden;

opacity: 10;

background: orange;

min-width: 5rem;

position: absolute;

transition: all 0.5s ease;

margin-top: 1rem;

left: 0;

display: none;

font-size: 13px;

}

ul li:hover > ul,

ul li:focus-within > ul,

ul li ul:hover,

ul li ul:focus {

visibility: visible;

opacity: 1;

display: block;

}

ul li ul li {

clear: both;

width: 100%;

}

</style>

<div>

<nav role="navigation">

<ul>

<li><a href="#LinkHere">Menu Item</a></li>

<li><a href="#LinkHere" aria-haspopup="true">Menu Item</a>

<ul class="dropdown" aria-label="submenu">

<li><a href="#LinkHere">Sub Menu 1</a></li>

<li><a href="#LinkHere">Sub Menu 2</a></li>

<li><a href="#LinkHere">Sub Menu 3</a></li>

</ul>

</li>

<li><a href="#LinkHere" aria-haspopup="true">Menu Item</a>

<ul class="dropdown" aria-label="submenu">

<li><a href="#LinkHere">Sub Menu 1</a></li>

<li><a href="#LinkHere">Sub Menu 2</a></li>

<li><a href="#LinkHere">Sub Menu 3</a></li>

</ul>

</li>

<li><a href="#LinkHere">Menu Item</a></li>

</ul>

</nav>

</div>