How To Style A Ul Li With Css To Make It Look Like A "form" Dropdown List?

I have a Ul Li with some links , they display like a menu. I want to set a 'dropdown' list but like the classic 'form' selectors... -not a drop-down menu that shows on hover, but

Solution 1:

Assuming, for some reason, you want to keep it as a list. You'll need more than CSS.

Step 1- In the HTML, put the list inside a and also add some HTML to style as the select box. e.g.

<divclass="dropdown-emulator"><divclass="dropdown-emulator-selected"></div><ahref="#"class="dropdown-emulator-select-btn">v</a><ul><li>Option 1 </li><li>Option 2 </li></ul></div>

Step 2- Add CSS to style this to the way you desire. Mainly you'll want to position the list to underneath the box and then display:none.

.dropdown-emulator{
  position:relative;
}

.dropdown-emulatorul{
  position:absolute;
  top:25px;
  left:0;
}

Step 3- Create some JavaScript to capture the onclick event of the select button to make the list appear.

For a very basic working example see here http://jsfiddle.net/q5SEF/3/

Solution 2:

I think for this, you probably want to use a field, using tags?

http://www.w3schools.com/tags/tag_select.asp

Alternatively.

You could trigger a jQuery visibility toggle on a hidden div, which would show the content of your dropdown, when it is clicked.

Solution 3:

I believe what you are looking for is a dropdown select. In stead of having a list of items use a select tag.

<selectid="mydropdown"><optionvalue="Milk">Fresh Milk</option><optionvalue="Cheese">Old Cheese</option><optionvalue="Bread">Hot Bread</option></select>