JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<br />
<div class="dropdown">
    <div class="input-prepend">
        <span id="search">
            <input type='text' class='span2 textbox' placeholder="Search" />
            <span class="add-on"><i class="icon-search"></i></span>
        </span>
    </div>

    <ul>
        <li><i class="icon-code"></i> Programming
            <ul>
                <li>Cascading Style Sheets</li>
                <li>Hyper-text Markup</li>
                <li>Shell Programming</li>
                <li>Borelnd Delphi</li>
            </ul>
        </li>
        <li><i class="icon-edit"></i> Authoring
            <ul>
                <li>Newspaper Articles</li>
                <li>Books & Novels</li>
                <li>Content & Blogs</li>
            </ul>
        </li>
        <li><i class="icon-heart-empty"></i> Support Us</li>
    </ul>
</div>

CSS

.dropdown {
    background: #007bce;
    font-family: Geneva, "MS Sans Serif", Sans-serif;
    font-size: 13px;
    text-shadow:0px 1px #059bff;
}
#search {
    float: right;
}
#search .textbox {
    padding: 7px;
    margin: 3px;
    background: #0769ad;
    border: 1px solid #1995e8;
    -moz-box-shadow:inset 0 0 3px #000;
    -webkit-box-shadow:inset 0 0 3px #000;
    box-shadow:inset 0 0 3px #000;
    width: 150px;
    -moz-transition:width 0.5s;
    -webkit-transition:width 0.5s;
    -o-transition:width 0.5s;
    transition:width 0.5s;
}

#search .textbox:focus {
    width: 200px;
    outline: none;
}

#search .add-on {
    padding-right: 12px;
    padding-left: 5px;
}

.dropdown ul {
    padding-left: 0;
    min-height: 16px;
    padding: 10px;
    border: 1px solid #064f7f;
    z-index: 99;
    /* Remove the browser-default padding for ul (40px) */
}
.dropdown ul li {
    padding: 10px;
list-style: none;
float: left;
display: inline-block;
margin-top: -11px;
cursor: pointer;
font-weight: 700;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.dropdown ul li:first-child {
    margin-left:-11px;
}

.dropdown ul li ul {
    margin-top: 1px;
    border: none!important;
    display: none;
    /* Hide the second level menu items initially */
    position: absolute;
    /* This will make the main menu item width intact no matter what the submenu item widths are */
}
.dropdown ul li ul li {
    margin-left: -20px!important;
border-left: 4px solid #232425;
padding: 10px;
font-weight: 300!important;
margin-top: 0;
color: #F7F7F7;
display: block;
z-index: 88;
text-shadow: 0px 1px #202020;
background: #232425;
float: none;
}
.dropdown ul li:hover{
    background: #0769AD;
-moz-box-shadow: inset 0 0 3px #1794e8;
text-shadow: 0px 1px #059BFF;
}.dropdown ul li:hover ul {
    display: block;
    /* Finally display the sub-items on hover of main item */
}

JavaScript

/* Basic CSS Dropdown codes  /
/  Completely driven by CSS  /
/  Original Author: effone   /
/  Modifyed by: JordanMussi  /
/  And Xige Time.            /
/  Some Styling by Envira     / 
/  Created for Dropdown Tut  /
/  (c) 2013, Demonate.com   */