從水平到垂直更改ul li

Question

我正在嘗試做一個菜單，當窗口寬度調整爲小的分辨率時將出現。下面是HTML和CSS如下

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

CSS：

nav ul 
{ 
    list-style:none; 
} 
nav li{ 
    display:inline; 
    line-height:1.5px; 
} 
nav li:not(:first-child) > :only-child, 
nav ul > :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) > :only-child{ 
    color:blue; 
} 
nav ul > :first-child a{ 
    color:white !important; 
    background:blue; 
} 

產出水平：

Home Articles Webinars 

我如何可以帶回列表中垂直然後設置 「UL」 位置絕對，並使「導航a」可見。列表應顯示垂直像下面

Home 
Articles 
Webinars 

Answer 1

nav{ 
 
    position:relative; 
 
} 
 
nav ul 
 
{ 
 
    position:absolute; 
 
    top:40px; /* this height is same as the menu.png */ 
 
    left:0; 
 
    z-index:999; 
 
    list-style:none; 
 
} 
 
nav li{ 
 
    list-style:none; 
 
    display:block; 
 
} 
 
nav ul li a{ 
 
    display:block; 
 
} 
 
nav li:not(:first-child) > :only-child, 
 
nav ul > :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) > :only-child{ 
 
    color:blue; 
 
} 
 
nav ul > :first-child a{ 
 
    color:white !important; 
 
    background:blue; 
 
}

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