StackOverflow Tags

Implementation of the tags used at stackoverflow

by FrictionlessPulley

HTML

<a href="#" class="skill-item"><span class="skill-title">Java</span>
    </a><div class="skill-desc" style="display:none;"><a href="#" class="skill-item">
        </a><div id="tag-menu"><a href="#" class="skill-item">
            <div>
                <div class="tm-heading">
                    <span class="tm-sub-info">
                      ★Java 
                    </span>
                </div>
                <div class="tm-description">
                    <ul>
                        <li>Worked for 2 years</li>
                        <li>Worked for 2 years</li>            
                    </ul>            
                </div>
            </div>
            <span class="tm-links">
                </span></a><a href="/questions/tagged/java?sort=faq">faq</a> 
                <a href="/tags/java/info">info</a> 
                <a href="/tags/java/topusers">top users</a>
            
        </div>
    </div>   

<a href="#" class="skill-item"><span class="skill-title">J2EE</span>
    </a><div class="skill-desc" style="display:none;"><a href="#" class="skill-item">
        </a><div id="tag-menu"><a href="#" class="skill-item">
            <div>
                <div class="tm-heading">
                    <span class="tm-sub-info">
                      ★Java 
                    </span>
                </div>
                <div class="tm-description">
                    <ul>
                        <li>Worked for 2 years</li>
                        <li>Worked for 2 years</li>            
                    </ul>            
                </div>
            </div>
            <span class="tm-links">
                </span></a><a href="/questions/tagged/java?sort=faq">faq</a> 
                <a href="/tags/java/info">info</a> 
                <a href="/tags/java/topusers">top users</a>
            
        </div>
    </div>

CSS

.skill-item {
border: 1px solid;
width: 50px;
height: 10px;
background-color: rgb(127, 159, 182);
padding: 1em;
border-radius: 4px;
moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5),inset 0 1px 0px rgb(127, 159, 182);
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5),inset 0 1px 0px rgb(127, 159, 182);
text-decoration: none;
margin: .4em .4em .4em .4em;
margin-top: 1em;
    cursor :pointer;
}

.skill-title {
text-align: auto;
color: rgb(62, 109, 142);
text-decoration: none;
}

#tag-menu {
border-radius: 4px;
border: 1px solid rgb(28, 28, 28);
border-top: 1px solid rgb(68, 68, 68);
background-color: rgb(80, 80, 80);
color: rgb(227, 227, 227);
text-align: left;
padding: 10px;
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5),inset 0 1px 0px #727272;
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5),inset 0 1px 0px rgb(114, 114, 114);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5),inset 0 1px 0px rgb(114, 114, 114);
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
z-index: 320;
position: relative;
font-size: 12px;
width: 248px;
}

#tag-menu .tm-heading {
color: white;
font-weight: bold;
border-bottom: 1px solid rgb(114, 114, 114);
padding-bottom: 8px;
margin-bottom: 8px;
}

#tag-menu .tm-description {
line-height: 13px;
font-size: 11px;
margin-bottom: 8px;
word-wrap: break-word;
}

#tag-menu .tm-links {
color: rgb(114, 114, 114);
}