JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script src="http://www.brandammo.co.uk/blog/wp-content/uploads/2011/02/jquery.naviDropDown.v1.0.DEMO/jquery.easing.1.3.js"></script>
<script src="http://www.brandammo.co.uk/blog/wp-content/uploads/2011/02/jquery.naviDropDown.v1.0.DEMO/jquery.hoverIntent.minified.js"></script>
<script src="http://www.brandammo.co.uk/blog/wp-content/uploads/2011/02/jquery.naviDropDown.v1.0.DEMO/jquery.naviDropDown.1.0.js"></script>
<div id="navigation_horiz">
    <ul>
        <li> <a href="profile.php" class="navlink"><img src="http://www.ags-portal.com/admin.jr/Homebtn.png" width="16" height="16"/> Profile</a>

            <div class="dropdown" id="dropdown_one">
                <p><a href="profile.php"><img src="http://www.ags-portal.com/admin.jr/Homebtn.png" width="16" height="16"/> Dashboard</a>
                </p>
                <p><a href="http://www.ags.edu.sa"><a href="profile.php"><img src="http://www.ags-portal.com/admin.jr/wwwicon.png" width="16" height="16"/> AGS Website</a>
                </p>
                <p><a href="http://sleuth.schoolsoftwarecompany.com/index.php"><img src="http://www.ags-portal.com/admin.jr/sleuth.png" width="24" height="10"/> AGS Sleuth</a>
                </p>
            </div>
            <!-- .dropdown_menu -->
        </li>
        <li>	<a href="" class="navlink"><img src="http://www.ags-portal.com/admin.jr/elementary_school.png" width="16" height="16"/>Students</a>

            <div class="dropdown" id="dropdown_one">
                <p><a href="#"><a href="http://sleuth.schoolsoftwarecompany.com/index.php"><img src="http://www.ags-portal.com/admin.jr/elementary_school.png" width="16" height="16"/> Add Student</a>
                </p>
                <p><a href="#"><a href="http://sleuth.schoolsoftwarecompany.com/index.php"><img src="http://www.ags-portal.com/admin.jr/delete-user.png" width="16" height="16"/> Remove Student</a>
                </p>
 ...

CSS

#navigation_horiz {
    width:100%;
    clear:both;
    padding:0 0 0 0;
    margin:0 auto
}
#navigation_horiz ul {
    height:50px;
    display:block
}
#navigation_horiz ul li {
    display:block;
    float:left;
    width:150px;
    height:50px;
    background:#123456;
    margin:0 1px 0 0;
    position:relative
}
#navigation_horiz ul li a.navlink {
    display:block;
    width:150px;
    height:30px;
    padding: 20px 0 0 0;
    text-align:center;
    color:#fff;
    text-decoration:none;
    font: 14px Arial, Helvetica, sans-serif;
    color: #FFF;
    text-transform: uppercase
}
#navigation_horiz .dropdown {
    position:absolute;
    padding:10px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-bottomleft:10px;
    font: 14px Arial, Helvetica, sans-serif;
    color: #FFF;
    text-transform: uppercase;
}
#navigation_horiz ul li #dropdown_one {
    background:#ccc;
    color:#fff
}
#navigation_horiz ul li #dropdown_one a {
    color:blue
}
#navigation_horiz ul li #dropdown_two {
    background:#ccc;
    color:#fff
}
#navigation_horiz ul li #dropdown_two a {
    color:black
}
#navigation_horiz ul li #dropdown_three {
    background:#ccc;
    color:#fff
}
#navigation_horiz ul li #dropdown_three a {
    color:gray
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    background-color:#FC0;
}
a:active {
    text-decoration: underline;
}

JavaScript

$(function () {

    $('#navigation_horiz').naviDropDown({
        dropDownWidth: '160px'
    });

});