將菜單按鈕轉換爲小屏幕（Angular2）的下拉菜單

Question

我想將按鈕菜單轉換爲下拉菜單以適應小屏幕。我有以下菜單HTML：

<ul> 
    <button>Button1</button> 
    <button>Button2</button> 
    <button>Button3</button> 
    <button>Button4</button> 
</ul> 

我有幾個單獨的CSS爲每個屏幕大小，但我只有一組HTML。如何將按鈕設置爲小屏幕尺寸的下拉列表？

Answer 1

<ul> 
    <li><button>Button1</button></li> 
    <li><button>Button2</button></li> 
    <li><button>Button3</button></li> 
    <li><button>Button4</button></li> 
</ul> 

這是創建下拉菜單的基本結構。 您可以使用CSS樣式添加下拉效果。

Answer 2

試試這個，

<ul> 
    <li><button>Button1</button></li> 
    <li><button>Button2</button></li> 
    <li><button>Button3</button></li> 
    <li><button>Button4</button></li> 
</ul>