←

Here's the absolute basics of creating a dropdown with CSS without javascript.

First create a container box, and give it a class.

<span class="dropdown_container">
</span>

Then within that place the actual content to show pre-dropdown.

<span class="dropdown_container">
  <span>Some text</span>
</span>

Now the content--with a class--to show when the dropdown is activiated:

<span class="dropdown_container">
  <span>Some text</span>
  <span class="dropdown">I am the dropdown</span>
</span>

Now with the css, hide the .dropdown class by default:

.dropdown { 
  display: none;
}

But when we hover over the .dropdown_container let's set the display property of .dropdown to block.

.dropdown_container:hover .dropdown { 
  display: block;
}

And voila. The final code is:

.dropdown {
  display: none;
}
.dropdown_container:hover .dropdown {
  display: block;
}

...

<span class="dropdown_container">
  <span>Some text</span>
  <span class="dropdown">I am the dropdown</span>
</span>