将菜单按钮转换为小屏幕（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>