como puedo crear submenu a partir del css de mi menu?

[ArturoGallegos]

ejemplo practico

Código CSS:

#menu{margin:0;padding:0;float:left;list-style:none;}
#menu li{position:relative;padding:3px 8px;margin:0 1px;}
#menu ul{display:none;}
#menu li:hover ul,#menu li ul:hover{display:block;position:absolute;list-style:none;}
 

Código HTML:

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
        <ul>
            <li><a href="#">SubItem1</a></li>
            <li><a href="#">SubItem2</a></li>
            <li><a href="#">SubItem3</a></li>
            <li><a href="#">SubItem4</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">SubItem5</a></li>
            <li><a href="#">SubItem6</a></li>
            <li><a href="#">SubItem7</a></li>
            <li><a href="#">SubItem8</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
</ul>