HTML CSS Exercise: CSS Navigation bar


HTML Code:

<html lang="en">
<meta charset=utf-8>
<title>HTML CSS exercise - create a simple navigaiton bar</title>
<style type="text/css">
nav {
display: block;
position: absolute;
top: 0;
width: 100%;
background-color: green;
list-style-type: none;
display: inline;
margin-right: 20px;
a:link {
color: #fff;
text-decoration: none;
a:hover {
color: orange;
text-decoration: none;
li > ul {
display: none
li:hover ul {display: block; position: absolute; left:200px;background-color:green;margin:0;}
li:hover ul li a:link{display: block;margin-left:-30px;}
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<a href="#">Products</a>
<li><a href="#">Engineering</a></li>
<li><a href="#">Telecom</a></li>
<li><a href="#">Energy</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Consultancy</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>

Live Demo :

See the Pen navigation-answer by w3resource (@w3resource) on CodePen.

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.