DropDown Menu werkt niet goed

Hoi
Ik heb deze gevolgt. Maar als ik met me muis over heen ga krijg ik dit:
Code[html]:

<style type="text/css">



#menu, #menu ul {

margin: 0 ;

padding: 0 ;

list-style: none ;

}



#menu li {

float: left;

width: 150px;

background: #CCC;

border: 1px solid #000;

}



#menu ul {

width: 150px;

position: absolute;

display: none;

}



#menu ul ul {

margin: -1em 0 0 150px ;

}



#menu li:hover > ul {

display: block;

}







</style>

</head>

<body>

<ul id="menu">

    <li><a href="#">Menu item</a>

        <ul>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

        </ul>

    </li>

    <li><a href="#">Menu item</a>

        <ul>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a></li>

            <li><a href="#">Sub item</a></li>

        </ul>

    </li>

    <li><a href="#">Menu item</a>

        <ul>

            <li><a href="#">Sub item</a></li>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a></li>

        </ul>

    </li>

</ul>

</body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

<head>



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Test</title>

<style type="text/css">



#menu, #menu ul {

margin: 0 ;

padding: 0 ;

list-style: none ;

}



#menu li {

float: left;

width: 150px;

background: #CCC;

border: 1px solid #000;

}



#menu ul {

width: 150px;

position: absolute;

display: none;

}



#menu ul ul {

margin: -1em 0 0 150px ;

}



#menu li:hover > ul {

display: block;

}







</style>

</head>

<body>

<ul id="menu">

    <li><a href="#">Menu item</a>

        <ul>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

        </ul>

    </li>

    <li><a href="#">Menu item</a>

        <ul>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a></li>

            <li><a href="#">Sub item</a></li>

        </ul>

    </li>

    <li><a href="#">Menu item</a>

        <ul>

            <li><a href="#">Sub item</a></li>

            <li><a href="#">Sub item</a>

                <ul>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                    <li><a href="#">Sub sub item</a></li>

                </ul>

            </li>

            <li><a href="#">Sub item</a></li>

        </ul>

    </li>

</ul>

</body>

</html>