add tools dropdown to mobile menu

This commit is contained in:
Aadil Ayub 2022-03-19 14:40:12 +05:00
parent 2257589b0c
commit e49b5c147e
2 changed files with 19 additions and 9 deletions

View File

@ -39,10 +39,16 @@
<li><a href="/">home</a></li> <li><a href="/">home</a></li>
<li><a href="/about/">about</a></li> <li><a href="/about/">about</a></li>
<li><a href="/calendar/">calendar</a></li> <li><a href="/calendar/">calendar</a></li>
<li><a href="/tv/">tv</a></li> <li class="has-submenu">tools
<li><a href="/social/">social</a></li> <ul class="submenu">
<li><a href="/pen/">pen</a></li> <li><a href="/tv/">tv</a></li>
<li><a href="/shouts/">shouts</a></li> <li><a href="/social/">social</a></li>
<li><a href="/pen/">pen</a></li>
<li><a href="/shouts/">shouts</a></li>
<li><a href="/kios/">kios</a></li>
<li><a href="/gallery/">gallery</a></li>
</ul>
</li>
</ul> </ul>
</aside> </aside>

View File

@ -240,19 +240,19 @@ body {
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }
.submenu li { .menu .submenu li {
margin: 2px 0; margin: 2px 0;
} }
.has-submenu { .menu .has-submenu {
cursor: pointer; cursor: pointer;
} }
.has-submenu:hover .submenu { .menu .has-submenu:hover .submenu {
visibility: visible; visibility: visible;
} }
#top-menu ul.submenu { #top-menu .menu ul.submenu {
margin-left: 11px; margin-left: 11px;
margin-top: 10px; margin-top: 10px;
border: 1px solid ; border: 1px solid ;
@ -264,11 +264,15 @@ body {
padding: 0 5px; padding: 0 5px;
} }
#top-menu .submenu a { #top-menu .menu .submenu a {
margin: 0; margin: 0;
display: flex; display: flex;
} }
.drawer .has-submenu {
padding-left: 2em;
}
/*Article Summary Cards*/ /*Article Summary Cards*/