JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<div class="wrap">
<h1 id="selectBox">Service you&#39;re interested in</h1>
			  <div class="selectBox">
			    <div class="selectBoxWrap">
                              <ul class="selectBoxContent">
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span class="innerPageSelect">Website Design and Development</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Website Maintenance</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Web Rescue / Redesign</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Domain Name Registration</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Internet Programming</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Ecommerce Gateway Integration</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Email Newsletter Management</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Site Hosting and Management</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Search Engine Optimisation</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Website Traffic Promotion</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Submission To Search Engines</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Secure Certificates</span></li>
                                <li><input type="checkbox" name="#" value="New Web Site" /> <span>Screen Animations (Jquery)</span></li>
         ...

CSS

.wrap {
    float:left;
    width:600px;
    border:1px solid red;
}
#selectBox {
    color:#555;
    float:left;
    width:227px;
    padding:11px 13px 13px 13px;
    background-image:url(images/select.gif);
    background-repeat:no-repeat;
    font-family:'Source Sans Pro', sans-serif !important;
    font-weight:normal !important;
    font-size:16px !important;
    border:1px solid red;
}
.selectBox {
    float:left !important;
    font-size:16px;
    width:252px;
    position:relative;
    left:0;
    bottom:4px;
}
.selectBoxWrap {
    float:left;
    z-index:99;
    position:absolute;
    padding:0 !important;
    margin:0 !important;
    background-color:transparent !important;
    background-color: rgba(0, 0, 0, 0);
    padding:0 !important
}
.selectBox ul {
    display:none;
    padding:0 !important;
    margin:0 !important;
}
.selectBox li {
    float:left;
    background-color:#fff;
    padding:5px 5px 5px 10px !important;
    width:237px;
}
.selectBox li:hover {
    background-color:#555;
}
.selectBox li.other {
    padding:0 0 !important;
    width:252px;
    background-color:#e0e0e0;
}
.selectBox li.last {
    width:237px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}
.selectBox li.other:hover {
    background-color:#e0e0e0;
}
.selectBox li:hover span {
    color:#fff;
}
.selectBox li span {
    font-size:13px;
    color:#555;
}

JavaScript

$(function () {

    $('#selectBox').click(function () {
        $('.selectBoxContent').slideToggle('fast');
        return false;

    });
});