HTML5 - Menú lateral

Sitio web con Menú lateral

CÓDIGO HTML5

HTML

<header>

        <h1>Mi web</h1>

        <nav>

            <ul>

                <li><a href="#">Item 1</a></li>

                <li><a href="#">Item 2</a>

                    <ul style="--cantidad-items: 4">

                        <li><a href="#">SubItem 1</a></li>

                        <li><a href="#">SubItem 2</a></li>

                        <li><a href="#">SubItem 3</a></li>

                        <li><a href="#">SubItem 4</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 3</a></li>

                <li><a href="#">Item 4</a>

                    <ul style="--cantidad-items: 4">

                        <li><a href="#">SubItem 1</a></li>

                        <li><a href="#">SubItem 2</a></li>

                        <li><a href="#">SubItem 3</a></li>

                        <li><a href="#">SubItem 4</a></li>

                    </ul>

                </li>

                <li><a href="#">Item 5</a></li>

            </ul>

        </nav>

       

    </header>

    <main>

        <h2>Hola =)</h2>

        <p>Todo el texto falopa de la web</p>

    </main>

CSS

:root{

    --transicion: 0.9s;

    --cada-item: 28px;

    --cantidad-items: 0;

}

body{

    display: flex;

    min-height: 100vh;

    margin:0;

    font-family: Arial;

    font-size: 16px;

    gap: 30px;

}

header{

    width: 200px;

    background: #1E1E1E;

}

nav ul{

    margin: 0;

    padding: 0;

    list-style: none;

    line-height: 16px;

}

nav ul li{

    border-bottom: 1px solid #1E1E1E;

}

nav ul a{

    box-sizing: border-box;

    color: white;

    background: #121212;

    display: block;

    width: 100%;

    padding: 6px 10px;

    text-decoration: none;

}

nav ul ul{

    height: 0px;

    overflow: hidden;

    transition: var(--transicion);

    counter-reset: items;

}

nav ul ul li{

    counter-increment: items;

}

nav ul li:hover ul{

    height: calc( var(--cantidad-items) * var(--cada-item) );

    background: rgb(2,0,36);

    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(67,103,17,1) 35%, rgba(0,212,255,1) 100%);

    /*

    height: 100%;

    max-height: calc( counter(items) * var(--cada-item) );

    */

}

nav ul li:hover ul a:hover{

    background: red;

    transition: .5s all linear;

}

nav ul ul a{

    background: transparent;

}