Simple navbar in pure HTML5 and CSS3 With some effort I've managed to build a very simple (maybe too simple haha) navigation bar for a website. 

Is it possible to make a transition on the dropwdown list from height:0 to some suitable height? I've tried and it seems not to be possible. No javascript for now

Any advice or extra tweak I could add? All is greatly welcome!



        /* reset */
        ul {
            list-style: none;
            margin: 0;
            padding: 0;

        }

        /* automatically take height of the elements */
        .main {
            background-color: brown;
            overflow: auto;
            /* automatically adjusts height to anchors */
        }

        .main__lis {
            margin-left: 20px;
            float: left;
            /* float the list items of the main ul */
        }

        a {
            display: block;
            padding: 10px;
            text-decoration: none;
        }

        .dropdown ul {
            width: 120px;
            text-align: left;
            position: absolute;
            background-color: pink;
            display: none;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }


        .dropdown:hover ul {
            display: block;
        }
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

    &lt;nav&gt;
        &lt;ul class='main'&gt;
            &lt;li class='main__lis'&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li class='main__lis'&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;
            &lt;li class='main__lis dropdown'&gt;
                &lt;a href="#"&gt;Dropdown&lt;/a&gt;
                &lt;ul class='dropdown_ul'&gt;
                    &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;link 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;link 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;

        &lt;/ul&gt;
    &lt;/nav&gt;
&lt;/body&gt;

&lt;/html&gt;
You probably want to reset the margin and padding of li items, too.

Using float to layout elements horizontally is outdated. Using flexbox should be preferred nowadays. That would also make overflow: auto redundant.

Prefer a child combinator instead of a descendant combinator if possible: .dropdown &gt; ul.

A dropdown on hover isn't usable on a touch screen.