You can use a sub-list to display navigation with sub-navigation. The next example is based in the approach discussed in the article How to use a structural list as a navigation menu with CSS. In the next test file the modified part is in bold:

C# 8.0 and .NET Core 3.0 – Modern Cross-Platform Development: Build applications with C#, .NET Core, Entity Framework Core, ASP.NET Core, and ML.NET using Visual Studio Code, 4th Edition
ASP.NET Core 3 and Angular 9: Full stack web development with .NET Core 3.1 and Angular 9, 3rd Edition
C# in Depth, 4th Edition


File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”


<html xmlns=”” lang=”en-US”>


<title> How to use lists to create a navigation system with sub-navigation with CSS </title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />



<div id=”navigation”>


<li><a href=”#”>Products and services</a>


<li><a href=”#”>Products A-Z list</a></li>

<li><a href=”#”>Virtualization</a></li>

<li><a href=”#”>Applications</a></li>

<li><a href=”#”>Operating systems</a></li>

<li><a href=”#”>Products price list</a></li>



<li><a href=”#”>Solutions</a></li>

<li><a href=”#”>Downloads</a></li>

<li><a href=”#”>Store</a></li>

<li><a href=”#”>Support</a></li>

<li><a href=”#”>Training</a></li>

<li><a href=”#”>Partners</a></li>

<li><a href=”#”>About</a></li>





You should modify the test.css file by following the next steps:

1. Add CSS for the nested list to show visually that it is a submenu, and not part of the main navigation.

#navigation ul ul {

margin-left: 12px;


2. Add some simple styles to the <li> and <a> tags within the nested list to complete the effect

#navigation ul ul li {

border-bottom: 1px solid #08088A;



#navigation ul ul a:link, #navigation ul ul a:visited {

background-color: #00BFFF;

color: #711515;


#navigation ul ul a:hover {

background-color: #08088A;

color: #FFFFFF;


The next picture shows the result:


Using of list to create a navigation system with sub-navigation with CSS

Using of list to create a navigation system with sub-navigation with CSS