Applying css on submenu issue

Question

This is the html code:

<ul id="nav">
    <li class="level0 nav-1 first level-top parent">
        <a href="#" class="level-top"><span>level1a</span></a>
            <ul class="level0">
                <li class="level1 nav-1-1 first">
                    <a href="#"><span>level1b</span></a></li>
                <li class="level1 nav-1-2"><a href="#"><span>level1c</span></a></li>
                <li class="level1 nav-1-3"><a href="#"><span>level1d</span></a></li>
                </li>
            </ul>
    </li>
    <li class="level0 nav-2 level-top"><a href="#" class="level-top"><span>level2a</span></a></li>
    <li class="level0 nav-3 level-top"><a href="#" class="level-top"><span>level2b</span></a></li>
    <li class="level0 nav-4 level-top"><a href="#" class="level-top"><span>level2c</span></a></li>
    <li class="level0 nav-5 level-top"><a href="#" class="level-top"><span>level2d</span></a></li>
</ul>

When i hover on the level1a I want to display the submenu. how can i do that?

css code:

.main-menu ul li ul{display: none;}
.main-menu ul li:hover{/* that part I don't know */}

Answer 1

you can try this one:

 .main-menu ul li:hover > ul{
        display:block;
    }

Answer 2

Try this :

.main-menu ul li:hover ul{
display:block;
}