JSFiddle - React, Tailwind, and code Playground

by Husen

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<ul class="nav nav-tabs">
    <li class="active"><a href="welcomeUser.php">Dashboard</a>
    </li>
    <li><a href="#"><strong>Profile</strong></a>
    </li>
    <li><a href="#"><strong>Timetable</strong></a>
    </li>
    <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle"><strong>Tasks&nbsp;<b class="caret"></b></strong></a>

        <ul class="dropdown-menu">
            <li class="dropdown"><a href="#" data-toggle="dropdown1" class="dropdown-toggle">Feedback&nbsp;<span class="right-caret right"></span></a>

                <ul class="dropdown-menu rightMenu dropdown1">
                    <li><a href="#">Enable feedback</a>
                    </li>
                    <li><a href="#">Feedback Defaulters</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

.rightMenu {
    position:relative;
    float:right;
}
.right-caret {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid #000000;
    display: inline-block;
    height: 0;
    opacity: 1;
    vertical-align: bottom;
    width: 0;
}
.right {
    float:right;
}