Multi-level Dropdown Menu

HTML:

<div id="nav">

    <ul>
    <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#" title="sub">Item 3</a>
            <ul>
                <li><a href="#">Item 3.1</a></li>
                <li><a href="#">Item 3.2</a></li>
                <li><a href="#">Item 3.3</a></li>
                <li><a href="#">Item 3.4</a></li>
                <li><a href="#">Item 3.5</a></li>
                <li><a href="#" title="sub">Item 3.6</a>
                    <ul>
                        <li><a href="#">Item 3.6.1</a></li>
                        <li><a href="#">Item 3.6.2</a></li>
                        <li><a href="#" title="sub">Item 3.6.3</a>
                            <ul>
                                <li><a href="#">Item 3.6.3.1</a></li>
                                <li><a href="#">Item 3.6.3.2</a></li>
                                <li><a href="#">Item 3.6.3.3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Item 3.6.4</a></li>
                        <li><a href="#">Item 3.6.5</a></li>
                    </ul>
                </li>  
                <li><a href="#">Item 3.7</a></li>
                <li><a href="#">Item 3.8</a></li>
                <li><a href="#">Item 3.9</a></li>
            </ul>
        </li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
    </ul>

</div>


CSS:

#nav { background:#3b7df6 url(images/bg.jpg) repeat-x; margin:15px auto; width:1000px; padding:0px; }
#nav a[title=sub] { font-weight:bold; }
#nav:after{ content: "."; display:block; height:0; font-size:0; clear:both; visibility:visible; }
#nav ul { margin:0px; padding:0px; list-style:none; }
#nav ul li { margin:0px; padding:8px 0px; list-style:none; float:left; }
#nav ul li a { padding:8px; margin:0px; color:#FFF; text-decoration:none; }
#nav ul li a:hover { background:#444 url(images/hover.jpg) repeat-x; color:#FFF; text-decoration:none; }

/* 1ST LEVEL DROP-DOWN MENU */
#nav ul li ul { display:none; }
#nav ul li:hover > ul { display:block; position:absolute; top:53px; }
#nav ul li:hover > ul li{ float:left; margin:0px; padding:0px; list-style:none;  }
#nav ul li:hover > ul li a { background:#444; text-decoration:none; }
#nav ul li:hover > ul li a:hover { background:#666; }

/* 2ND LEVEL DROP-DOWN MENU */
#nav ul li > ul li ul { display:none; }
#nav ul li > ul li:hover > ul { display:block; position:absolute; top:22px; }
#nav ul li > ul li:hover ul li { margin:0px; padding:0px 0px; float:none; list-style:none; width:11em; position:relative; }
#nav ul li > ul li:hover ul li a { display:block; background:#666; }
#nav ul li > ul li:hover ul li a:hover { background:#999; }

/* 3RD LEVEL DROP-DOWN MENU */
#nav ul li > ul li ul li > ul { display:none; }
#nav ul li > ul li ul li:hover > ul { display:block; position:absolute; top:0px; left:100%; }
#nav ul li > ul li ul li:hover > ul li { list-style:none; float:none; margin-left:1px; padding:0px; }