使用css下拉菜单

Question

我使用li和ul构建了一个菜单但当我将鼠标悬停在菜单上时无法单击子菜单。将鼠标悬停在菜单上时会出现子菜单，但是当我移动鼠标单击子菜单时，它会立即消失。这是我的代码

<div id="navbar">
        <ul>
            <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
            <li><span><a href="#">Shop</a></span>

            </li>
            <li>
                <span><a href="#">Top menu</a></span>
                <ul>
                    <li>
                        <span><a href="#">Sub menu</a></span>
                    </li>
                </ul>
            </li>
            <li><span><a href="#">Test1</a></span>

            </li>
            <li><span><a href="#">Test2</a></span>

            </li>
        </ul>
</div>

#navbar li ul {
    margin: 0;
    padding: 0;
    position: relative;
    display: none;
    width: 10em;

    /* Width to help Opera out */
    background-color: #b5cd96;
}

#navbar ul li:hover ul {
    display:block;
}

非常感谢任何帮助。感谢