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.

• • Office
    • MS Word
    • MS Excel
  • OS
    • Window XP
    • Windows 7
  • Graphic
    • Photoshop
    • CorelDraw
   

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 .

HTML Forms

HTML DECIMAL Color Code and HEX Color Code

HTML Nested Lists

Elements and Tags In HTML

4 Primary Tags In HTML

Create Your First Web Page in HTML

Attributes in HTML Tags

HTML DOCTYPE Declaration

HEAD Tag in HTML

Meta Tags in HTML

Body Tag in HTML

H1 to H6 HTML Elements

Basic HTML Elements

HTML Table Element

Basefont HTML Element

Formatting Element in HTML

Font Element In HTML

Style Element in HTML

CSS Properties

DIV in HTML Document

List in HTML

Creating Menus With HTML list

Creating Horizontal Menu With HTML list

HTML Image Tag

Hyperlinks In HTML