Drop Down Example

Hello world , in this tutorial I will show you a simple drop down example , the code is made by our member , Wanse and tutorial by me , ok , so lets start.
The first part is too create some divs , 1 hide and 1 with the drop down so , we have that nice code :

Code:

<div class="dropdown">
        <input class="dropdown-toggle" type="text">
        <div class="dropdown-text">Options</div>
        <ul class="dropdown-content">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Log Out</a></li>
        </ul>
      </div>

Ok , now we need to have and some CSS , we will use the to add the CSS , the CSS look like that

Code:

<style>
  .dropdown {
      position: relative;
      display: inline-block;
      text-align: left;
      width: 132px;
    }

    .dropdown-text::-moz-selection,
    .dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
    .dropdown-text::selection,
    .dropdown-toggle::selection { background: transparent; color: inherit; }

    .dropdown-text {
      cursor: pointer;
      position: absolute;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
      width: 100%;
    }

    .dropdown-text:after {
      position: absolute;
      right: 6px;
      top: 15px;
      content: '';
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      border-color: #555 transparent transparent transparent;
    }

    .dropdown-text,
    .dropdown-content a {
      color: #333;
      text-shadow: 0 1px #fff;
    }

    .dropdown-toggle {
      font-size: 0;
      z-index: 1;
      cursor: pointer;
      position: absolute;
      top: 0;
      border: none;
      padding: 0;
      margin: 0 0 0 1px;
      background: transparent;
      text-indent: -10px;
      height: 34px;
      width: 100%;
    }

    .dropdown-toggle:focus {
      outline: 0;
    }

    .dropdown-content {
      -webkit-transition: .25s ease;
      -moz-transition: .25s ease;
      -ms-transition: .25s ease;
      -o-transition: .25s ease;
      transition: .25s ease;
      list-style-type: none;
      position: absolute;
      top: 32px;
      padding: 0;
      margin: 0;
      opacity: 0;
      visibility:hidden;
      border-radius: 3px;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      width: 140px;
    }

    .dropdown-content a {
      display: block;
    }

    .dropdown-content a:hover {
      background: #e8e8e8;
    }


    .dropdown-toggle:hover ~ .dropdown-text,
    .dropdown-toggle:focus ~ .dropdown-text {
      background-color: #e8e8e8;
    }

    .dropdown-toggle:focus ~ .dropdown-text {
      border-color: #c5c5c5;
      box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
      z-index: 2;
    }

    .dropdown-toggle:focus ~ .dropdown-text:after {
      border-width: 0 4px 5px 4px;
      border-color: transparent transparent #555 transparent;
    }

    .dropdown-content:hover,
    .dropdown-toggle:focus ~ .dropdown-content {
      opacity: 1;
      visibility:visible;
      top: 42px;
    }
</style>

And is done , this is  simple example , if you have problems or questions about that you can post in CSS Help Desk

Preview : https://fmsoftware.forumotion.com/h1-

Link with example: https://fmsoftware.forumotion.com/h1-

Thanks for share. :)