Nested List in HTML

HTML Nested Lists

In HTML when a list is written in the body of other list then it is called nested list. In This tutorials we learn how we create a nested list in HTML using CSS.

First we write HTML Code For Nested List


<div id="container">
<ul>
<li><a href="#">Office</a>
<ul>
<li><a href="#">MS Word</a></li>
<li><a href="#">MS Excel </a></li>
</ul>
</li>
<li><a href="#">OS</a>
<ul>
<li><a href="#">Window XP</a></li>
<li><a href="#">Window 7</a></li>
</ul>
</li>
<li><a href="#">Graphic</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">CorelDRAW</a></li>
</ul>
</li>
</div>

Now Write The CSS Code

--------------------------------------------------------------------

This step remove Bullet form List and make Padding Margin 0 for UL
 


#container ul
{
margin: 0;
padding: 0;
list-style-type: none;
} 

This step Display the List in Block with same size and set background and width of block. In this step Text direction is Most important which remove the Underline of link

 



#container a
{
display: block;
color: #FFF000;
background-color: #036000;
width: 12em;
padding: 5px 10px 4px 10px;
text-decoration: none;
border-bottom: 1px solid #fff000;
font-weight: bold;
} 

In This step se set the Link hover color and Link Background color.


#container a:hover
{
background-color: #369;
color: #FFF;
} 
#container li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}



Save This code in CSS file separate .