Hi!
I have a menu that is made up from nested lists on three levels. The elements in the second level are open only when an element is clicked (This is what I want), but the elements on the third level is already opened.
This is the html code:
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li>Homepage</li>
<li>Introduzione</li>
<li>
<span class="opener">Arcani maggiori</span>
<ul>
<li>Il Matto</li>
<li>Il Mago</li>
<li>La Papessa</li>
<li>L'imperatrice</li>
</ul>
</li>
<span class="opener">Arcani minori</span>
<ul>
<li>
<span class="opener">Le Spade</span>
<ul>
<li>Asso di Spade</li>
<li>Due di Spade</li>
</ul>
</li>
<li>Strumenti</li>
</ul>
</nav>
This is the CSS code:
/* Menu */
#menu ul {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
color: #3d4449;
font-family: "Roboto Slab", serif;
font-weight: 400;
letter-spacing: 0.075em;
list-style: none;
margin-bottom: 0;
padding: 0;
text-transform: uppercase; }
#menu ul a, #menu ul span {
border-bottom: 0;
color: inherit;
cursor: pointer;
display: block;
font-size: 0.9em;
padding: 0.625em 0; }
#menu ul a:hover, #menu ul span:hover {
color: #f56a6a; }
#menu ul a.opener, #menu ul span.opener {
-moz-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;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
position: relative; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0; }
#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
color: #f56a6a; }
#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
display: block; }
#menu ul a.opener.active:before, #menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg); }
#menu > ul > li {
border-top: solid 1px rgba(210, 215, 217, 0.75);
margin: 0.5em 0 0 0;
padding: 0.5em 0 0 0; }
#menu > ul > li > ul{
color: #9fa3a6;
display: none;
margin: 0.5em 0 1.5em 0;
padding-left: 1em; }
#menu > ul > li > ul a, #menu > ul > li > ul span {
font-size: 0.8em; }
#menu > ul > li > ul > li {
margin: 0.125em 0 0 0;
padding: 0.125em 0 0 0; }
#menu > ul > li:first-child {
border-top: 0;
margin-top: 0;
padding-top: 0; }
I’d like to do this how for the second level. Excuse me for my English, my native language is Italian.
Thanks very much for the help!
