uliを水平から垂直に変更する

Question

ウィンドウの幅を小さな解像度に変更したときに表示されるメニューを作成しようとしています。私は "UL" の位置を設定し、その後垂直にリストを戻すことができますどのように

Home Articles Webinars 

：

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; 
} 

水平で出力：以下は、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 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>