[CSS] Facebook Style Dropdown

OK, today we going to learn a facebook style dropdown. It's a pretty simple tutorial.

First off we need the markup, also know as the HTML

Code:

<div class="dropdown" id="dropdown">
   <input type="checkbox" id="drop1" />
      <label for="drop1" class="dropdown_button">Buy/Listen <span class="arrow"></span></label>
      <ul class="dropdown_content">
         <li><a href="#">Buy on iTunes</a></li>
         <li><a href="#">Buy on Amazon</a></li>
         <li><a href="#">Buy on CD Baby</a></li>                               
         <li><a href="#">Listen via Spotify</a></li>                                                               
         <li><a href="#">View on YouTube</a></li>                                                               
         <li><a href="#">View on Last.fm</a></li>                               
      </ul>
</div>

Now it's just as simple as styling it, they are just basic styles...

Code:

.dropdown {
   display: block;
   display: inline-block;
   margin: 0px 3px;
   position: relative;
}

.dropdown .dropdown_button {
   cursor: pointer;
   width: auto;
   display: inline-block;
   padding: 4px 5px;
   border: 1px solid #AAA;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   font-weight: bold;
   color: #717780;
   line-height: 16px;
   text-decoration: none !important;
   background: white;
}

.dropdown input[type="checkbox"]:checked +  .dropdown_button {
   border: 1px solid #3B5998;
   color: white;
   background: #6D84B4;
   -moz-border-radius-topleft: 2px;
   -moz-border-radius-topright: 2px;
   -moz-border-radius-bottomright: 0px;
   -moz-border-radius-bottomleft: 0px;
   -webkit-border-radius: 2px 2px 0px 0px;
   border-radius: 2px 2px 0px 0px;
   border-bottom-color: #6D84B4;
}

.dropdown input[type="checkbox"] + .dropdown_button .arrow {
   display: inline-block;
   width: 0px;
   height: 0px;
   border-top: 5px solid #6B7FA7;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
}

.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent }

.dropdown .dropdown_content {
   position: absolute;
   border: 1px solid #777;
   padding: 0px;
   background: white;
   margin: 0;
   display: none;
}

.dropdown .dropdown_content li {
   list-style: none;
   margin-left: 0px;
   line-height: 16px;
   border-top: 1px solid #FFF;
   border-bottom: 1px solid #FFF;
   margin-top: 2px;
   margin-bottom: 2px;
}

.dropdown .dropdown_content li:hover {
   border-top-color: #3B5998;
   border-bottom-color: #3B5998;
   background: #6D84B4;
}

.dropdown .dropdown_content li a {
   display: block;
   padding: 2px 7px;
   padding-right: 15px;
   color: black;
   text-decoration: none !important;
   white-space: nowrap;
}

.dropdown .dropdown_content li:hover a {
   color: white;
   text-decoration: none !important;
}

.dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block }

.dropdown input[type="checkbox"] { display: none }

---

This tutorial is copyright to GeekShield. It may not be posted elsewhere without written consent
GeekShield 2012

Nice tut, the demo button doesn't work though.

Dex♥ wrote:Nice tut, the demo button doesn't work though.

I've got the same problem.