HTML CSS Exercise: CSS Navigation bar


HTML Code:

<!DOCTYPE HTML><!-- Declares the document type and version of HTML -->
<html lang="en"><!-- Begins the HTML document and sets the language to English -->
<meta charset=utf-8><!-- Sets the character encoding to UTF-8 -->
<title>HTML CSS exercise - create a simple navigaiton bar</title><!-- Sets the title of the webpage -->
<style type="text/css"> /* Begins CSS styling */
nav { /* Styles for the navigation bar */
display: block; /* Makes the navigation bar a block element */
position: absolute; /* Positions the navigation bar absolutely */
top: 0; /* Positions the navigation bar at the top of the page */
width: 100%; /* Sets the width of the navigation bar to 100% */
background-color: green; /* Sets the background color of the navigation bar to green */
li{ /* Styles for list items */
list-style-type: none; /* Removes the default bullet points from list items */
display: inline; /* Displays list items inline */
margin-right: 20px; /* Adds right margin between list items */
font-size:25px; /* Sets the font size of list items */
a:link { /* Styles for unvisited links */
color: #fff; /* Sets the color of unvisited links to white */
text-decoration: none; /* Removes underline from unvisited links */
a:hover { /* Styles for hovered links */
color: orange; /* Sets the color of hovered links to orange */
text-decoration: none; /* Removes underline from hovered links */
li> ul { /* Styles for nested ul elements within list items */
display: none; /* Hides nested ul elements by default */
li:hover ul { /* Styles for displaying nested ul elements when list item is hovered */
display: block; /* Displays nested ul elements */
position: absolute; /* Positions nested ul elements absolutely */
left:200px; /* Aligns nested ul elements to the right of the parent list item */
background-color:green; /* Sets the background color of nested ul elements to green */
margin:0; /* Removes any margin from nested ul elements */
li:hover ul li a:link{display: block;margin-left:-30px;} /* Styles for links within nested ul elements */
</style><!-- Ends CSS styling -->
<body><!-- Begins the body of the document -->
<nav><!-- Begins the navigation bar -->
<ul><!-- Begins the unordered list -->
<li><a href="#">Home</a></li><!-- List item for "Home" link -->
<li><a href="#">About</a></li><!-- List item for "About" link -->
<li><!-- List item for "Products" link with nested ul -->
<a href="#">Products</a><!-- Link for "Products" -->
<ul><!-- Nested ul for product categories -->
<li><a href="#">Engineering</a></li><!-- List item for "Engineering" category -->
<li><a href="#">Telecom</a></li><!-- List item for "Telecom" category -->
<li><a href="#">Energy</a></li><!-- List item for "Energy" category -->
<li><a href="#">Finance</a></li><!-- List item for "Finance" category -->
<li><a href="#">Consultancy</a></li><!-- List item for "Consultancy" category -->
</ul><!-- Ends the nested ul -->
</li><!-- Ends the list item for "Products" -->
<li><a href="#">Services</a></li><!-- List item for "Services" link -->
<li><a href="#">Contact</a></li><!-- List item for "Contact" link -->
</ul><!-- Ends the unordered list -->
</nav><!-- Ends the navigation bar -->
</body><!-- Ends the body section -->
</html><!-- Ends the HTML document -->


  • This HTML/CSS code creates a simple navigation bar.
  • The <nav> element contains an unordered list <ul> that represents the menu items.
  • Each menu item is represented by a list item <li> containing an anchor <a> tag for the link.
  • Nested lists are used for dropdown menus. When a list item is hovered, its nested list is displayed.
  • CSS is used to style the navigation bar, list items, links, and dropdown menus.

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.