HTML CSS Exercise: CSS Navigation bar

Last update on March 04 2024 06:51:49 (UTC/GMT +8 hours)

Solution:

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 -->
<head>
<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 -->
</head>
<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 -->

Explanation:

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


Yes	Yes	Yes	Yes	Yes