<div class="example">
        <ul id="nav">
            <li class="current"><a href="http://www.freetimelearning.com/">Home</a></li>
            <li><a href="#">Front End</a>
                <ul>
                    <li><a href="http://www.freetimelearning.com/html-tutorial.php">HTML</a></li>
                    <li><a href="http://www.freetimelearning.com/html5-tutorial.php">HTML5</a></li>
                    <li><a href="http://www.freetimelearning.com/css-basic-tutorial.php">CSSS</a></li>
                    <li><a href="http://www.freetimelearning.com/css3-tutorial.php">CSS3</a></li>
                    <li><a href="#">Scripts</a>
                        <ul>
                            <li><a href="http://www.freetimelearning.com/javascript-tutorial.php">JavaScript</a></li>
                            <li><a href="http://www.freetimelearning.com/jquery-tutorial.php">jQuery</a></li>
                            <li><a href="http://www.freetimelearning.com/angularjs-tutorial.php">AngularJS</a></li>
                        </ul>
                    </li>
                    <li><a href="http://www.freetimelearning.com/bootstrap-tutorial.php">Bootstrap</a></li>
                </ul>
            </li>
            <li><a href="#">Back End</a>
                <ul>
                    <li><a href="http://www.freetimelearning.com/java-tutorial.php">Java</a></li>
                    <li><a href="http://www.freetimelearning.com/php-tutorial.php">PHP</a></li>
                    <li><a href="http://www.freetimelearning.com/python-tutorial.php">Python</a></li>
                </ul>
            </li>
            <li><a href="#">Examples</a>
                <ul>
                    <li><a href="http://www.freetimelearning.com/html/html-examples.php">HTML Examples</a></li>
                    <li><a href="http://www.freetimelearning.com/html5/html5-examples.php">HTML5 Examples</a></li>
                    <li><a href="http://www.freetimelearning.com/css-tutorial/css-examples.php">CSS Examples</a></li>
                    <li><a href="http://www.freetimelearning.com/css3/css3-examples.php">CSS3 Examples</a></li>
                    <li><a href="http://www.freetimelearning.com/javascript/javascript-examples.php">JavaScript Examples</a></li>
                    <li><a href="http://www.freetimelearning.com/jquery/jquery-examples.php">jQuery Examples</a></li>
                    <li><a href="http://www.freetimelearning.com/bootstrap/bootstrap-examples.php">Bootstrap Examples</a></li>
                    <li><a href="http://www.freetimelearning.com/angularjs/angularjs-examples.php">AngularJS Examples</a></li> 
                </ul>
            </li>
        </ul>
    </div>
body {
    background: #E2E2E2;
    margin: 0;
    padding: 0
}

.example {
    font-family: Arial, Helvetica, sans-serif;
    width: 780px;
    height: 150px;
    margin: 20px auto;
    padding: 15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}

#nav,
#nav a {
    border-radius: 2px
}

#nav {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #F90
}

#nav li {
    margin: 10px;
    float: left;
    position: relative;
    list-style: none
}

#nav a {
    font-weight: 700;
    color: #FFF;
    text-decoration: none;
    display: block;
    padding: 8px 20px
}

#nav .current a,
#nav li:hover>a {
    color: #000
}

#nav li:hover li a,
#nav ul li:hover a {
    background: 0 0;
    border: none;
    color: #000
}

#nav ul li a:hover {
    color: #fff;
    border-radius: 3px
}

#nav ul li:first-child>a {
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-top-right-radius: 2px
}

#nav ul li:last-child>a {
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px
}

#nav li:hover>ul {
    opacity: 1;
    visibility: visible
}

#nav ul {
    opacity: 0;
    top: 35px;
    visibility: hidden;
    padding: 10px 0;
    width: 190px;
    position: absolute;
    border-radius: 2px;
    background: #fac695;
    background: -moz-linear-gradient(top, #fac695 0, #f5ab66 47%, #ef8d31 100%);
    background: -webkit-linear-gradient(top, #fac695 0, #f5ab66 47%, #ef8d31 100%);
    background: linear-gradient(to bottom, #fac695 0, #f5ab66 47%, #ef8d31 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=0)
}

#nav ul li {
    float: none;
    margin: 0
}

#nav ul a {
    font-weight: 400
}

#nav ul ul {
    left: 190px;
    top: 0
}

.clearfix {
    clear: both
}

.ftl {
    font-size: 16px;
    font-style: italic;
    padding: 100px 0;
    font-weight: 700;
    margin: 0 auto;
    text-align: center
}

.ftl a {
    color: #09C;
    text-decoration: none
}

.ftl a:hover {
    color: #999
}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.