JSFiddle - React, Tailwind, and code Playground

Dot Menu

by Jennifer Perrin

HTML

<div class="menu_holder">
    <ul class="menu">
        <li class="active parent"><a href="" class="tooltip" data-tooltip="Home"><img src="http://jenniferperrin.com/jsfiddle/icons/home.png" /></a></li>
        <li class="parent"><a href="" class="tooltip" data-tooltip="About"><img src="http://jenniferperrin.com/jsfiddle/icons/idcard.png" /></a></li>
        <li class="parent"><a href="" class="tooltip" data-tooltip="Portfolio"><img src="http://jenniferperrin.com/jsfiddle/icons/portfolio.png" /></a>
            <ul>
                <li><a href="">3 Column</a></li>
                <li><a href="">2 Column</a></li>
                <li><a href="">Single Project</a></li>
            </ul>
        </li>
        <li class="parent"><a href="" class="tooltip" data-tooltip="Search"><img src="http://jenniferperrin.com/jsfiddle/icons/search.png" /></a>
            <ul>
                <li><a href="">Slingle Post</a></li>
            </ul>
        </li>
        <li class="parent"><a href="" class="tooltip" data-tooltip="Contact"><img src="http://jenniferperrin.com/jsfiddle/icons/mail.png" /></a></li>
        <li class="parent"><a href="" class="tooltip" data-tooltip="Log In"><img src="http://jenniferperrin.com/jsfiddle/icons/lock.png" /></a></li>
    </ul>
</div>

CSS

body { margin-left: 100px; }
a { text-decoration: none; }

.menu_holder {
    height: 80px;
    min-width: 30px;
    padding-top: 42px;
    width: auto;
}
.menu_holder ul {
    list-style: none outside none;
}
.menu {
    list-style: none outside none;
}
.menu li.parent {
    background: none repeat scroll 0 0 #DBDBDB;
    border-radius: 50% 50% 50% 50%;
    float: left;
    height: 50px;
    margin-right: 30px;
    padding: 5px;
    width: 50px;
}
.menu li.parent:last-child {
    margin-right: 0;
}
.menu li.parent a {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    color: #26B1AA;
    display: block;
    height: 35px;
    padding-top: 15px;
    text-align: center;
    width: 50px;
}
.menu li.parent.active a {
    background: none repeat scroll 0 0 #26B1AA;
    color: #FFFFFF;
}
.menu li.parent a:hover {
    background: none repeat scroll 0 0 #26B1AA;
    color: #FFFFFF;
    text-decoration: none;
}
.menu li {
    position: relative;
}
.menu li:hover > ul {
    display: block;
}
.menu li ul {
    display: none;
    left: -65px;
    list-style: none outside none;
    margin-left: 0;
    padding: 7px 5px 5px;
    position: absolute;
    top: 60px;
    z-index: 9999;
}
.menu li ul li a {
    background: none repeat scroll 0 0 #1C1C1C !important;
    border-radius: 3px 3px 3px 3px !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    height: 15px !important;
    margin-bottom: 1px;
    padding-bottom: 15px;
    padding-top: 10px !important;
    width: 180px !important;
}
.menu li ul li a:hover {
    background: none repeat scroll 0 0 #26B1AA !important;
}

.menu img {
    margin: 0 0 16px 0;
}


.tooltip {
    position: relative;
    text-decoration: none;
    font-size: 12px !important;
}

.tooltip:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 0;
    background: #1C1C1C;
    padding: 5px 15px;
    color: #fff;
    -webkit-border-radius: 3px;
   ...

JavaScript

$(document).ready(function() {

});