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.

<div class="dropdown-emulator">
  <div class="dropdown-emulator-selected"></div>
  <a href="#" 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-emulator ul{
  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.

<select id="mydropdown">
  <option value="Milk">Fresh Milk</option>
  <option value="Cheese">Old Cheese</option>
  <option value="Bread">Hot Bread</option>
</select>