Question

I have css menu which is of two level mean One main and other is its subsequest .for example

Home--Link1
      Link2
      Link3
      Link4

But Now I have need to extend this menu to more subsequent link like this

Home--Link1--SLink1
      Link2  SLInk2
      Link3  SLink3
      Link4--Slink1
             Slink2

But I am unable to unserstAND HOW TO CONVERT THE MENU TO MUltilevel please any one help me to do this
Here is My Css Code

#sddmSFPL
{   margin: 0;
    padding: 0;
    z-index: 30}

#sddmSFPL li
{   margin: 0;
    padding: 0;
    list-style: none;

    font: 11px Tahoma}

#sddmSFPL li a
{   display: block;
    margin: 0 1px 0 0;
    padding: 4px 10px;
    width: 100px;
    background: #FFFFFF;
    color: #222222;
    text-align: Left;

    text-decoration:none}

#sddmSFPL li a:hover
{   background: #EEEEEE;
    color:#222222;
    border:solid 1px #EEEEEE; 
    padding:3px 9px; 
    border-left-color:#DD4b39;    
    }


#sddmSFPL div
{   position: absolute;
    visibility: hidden;
    margin:-24px 120px;
    padding:4px 10px;         
    background: #FFFFFF;    
    border: 1px solid #EEEEEE}

    #sddmSFPL div a
    {   position: relative;
        display: block;
        margin: 0 0 0 0;
        padding: 4px 10px;       
        width: auto;
        white-space:normal;
        text-align: left;
        text-decoration: none;
        background: #FFFFFF;
        color: #222222;
        font: 11px Tahoma}

    #sddmSFPL div a:hover
    {   background: #EEEEEE;
        color:  #222222;
        padding:3px 9px; }

And here are the link in menu which i am want to convert into multilevel

 <ul id="sddmSFPL">    
    <li>
    <a href="#" id="MilkReports" runat=server >Milk Reports</a>
        <div id="m29"  onmouseover="mcancelclosetime()"  onmouseout="mclosetime()">
        <a href="http://sml.com.pk/sfpl/milk.php" target=_blank >Milk Receipt Dashboard</a>
        <a href="http://foods.shakarganj.com.pk/pdf/procurement_structure.pdf" target=_blank> Milk Procurement Structure</a>        
    </div>
    </li>
</ul>

And here is my JS code to open and close the menues

<!--
var timeout         = 2000;
var closetimer      = 0;
var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{   


//  onmouseover="timer1=setTimeout(function(){show('tip1');}, 500);"
//onmouseout="clearTimeout(timer1);"



    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

// close layer when click-out
//document.onmouseover = mclose; 
// -->

Answer 1

LIVE DEMO

Here I give you a pure css multilevel css menu.

HTML:

<div id="navigation">
    <ul class="top-level">
        <li><a href="#">Home</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a>
                </li>
                <li><a href="#">Sub Menu Item 2</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Sub Menu Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 3</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li>
            <a href="#">FAQ</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 3</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Sub Menu Item 4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">News</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a>
                    <ul class="sub-level">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                        <li><a href="#">Sub Sub Menu Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

#navigation {font-size:0.75em; width:150px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 

ul.top-level {background:#666;}
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}

#navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
}

#navigation li:hover {
 background: #f90;
 position: relative;
}

ul.sub-level {
    display: none;
}

ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}

ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}

/*Seconda Level*/
#navigation .sub-level {
    background: #999;
}

/*Third Level*/
#navigation .sub-level .sub-level {
    background: #09C;
}

/*RESET STYLES*/
li:hover .sub-level .sub-level {
    display:none;
}
.sub-level li:hover .sub-level {
    display:block;
}