change ul li from horizontal to vertical
<p>I am trying to do a Menu that will appear when Window width is resized to a small resolution. Below is the HTML and CSS are below</p>

<pre><code>&lt;nav&gt;
 &lt;a id="menu-dropdown"&gt;&lt;img src="http://localhost/influenza/logo/menu.png" /&gt;&lt;/a&gt;
 &lt;ul&gt;
    &lt;li&gt;&lt;a class="tab-click" href="http://localhost/influenza/index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://localhost/influenza/articles.php"&gt;Articles&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="http://localhost/influenza/webinars.php"&gt;Webinars&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>CSS:  </p>

<pre><code>nav ul
{
    list-style:none;
}
nav li{
    display:inline;
    line-height:1.5px;
}
nav li:not(:first-child) &gt; :only-child,
nav ul &gt; :first-child a{
   text-decoration:none;
   font-size:1.4em !important;
   outline:1px solid blue;
   padding:8px;
   letter-spacing:0.9px;
   margin-left:18px;
}  
nav li:not(:first-child) &gt; :only-child{
   color:blue;
}
nav ul &gt; :first-child a{
  color:white !important;
  background:blue;
}
</code></pre>

<p>Output in Horizontal:</p>

<pre><code>Home    Articles    Webinars
</code></pre>

<p>How can I bring back the list to Vertical then set "ul" position to absolute and make "nav a" to be visible. The list should display vertically like below</p>

<pre><code>Home
Articles
Webinars
</code></pre>