Desejo alterar uma visualização de lista horizontal para selecionar a caixa em dispositivos móveis - javascript, jquery, html5, css3

Eu criei uma lista ul ul simples como abaixo:

<ul>
<li>All</li>
<li>All</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

No momento, parece com isso:

Eu quero que isso seja como caixa de seleção em dispositivos móveis

Respostas:

hello friend,

if you need your <ul> <li> structure as select box in mobile device,so you need to  code this structure twice.

1. as you already write.add class name to hide this in mobile
<ul class="list-desktop-wrap">
<li>All</li>
<li>All</li>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>



2.<div class="section-mobile-only">
<select>
<option value="All" selected>All</option>
<option value="All">All</option>
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option 3</option>
</select>
</div>
As make this section display none in desktop & and display block in mobile device. if you need to view select box after 768 resolution (i-pad) so make css as
@media (max-width:768px){
.list-desktop-wrap{display:none};
.section-mobile-only{display:block};
}

initally its

.section-mobile-only{display:none};