How to create drop down submenu on mouse over

Here is code for creating drop down submenu on mouse over hope it will help new web designer and web developer

<ul id="subjectsNav">
<li><a href="#" title="SUBJECTS">SUBJECTS</a>

    <ul>
        <li><a href="#" title="Maths">Maths</a>
        </li>
        <li><a href="#" title="English">English</a>
        </li>
        <li><a href="#" title="Spanish">Spanidsh</a>
        </li>
        <li><a href="#" title="History">History</a>
        </li>
        <li><a href="#" title="Science">Science</a>
        </li>
        <li><a href="#" title="EXTRA">EXTRA</a>
            <ul>
                <li><a href="#" title="Arts">Arts</a>
                </li>
                <li><a href="#" title="Sports">Sports</a>
                </li>
                <li><a href="#" title="Community">Community</a>
                </li>
            </ul>
        </li>
        <li><a href="#" title="Marks">Marks</a>
        </li>
    </ul>
</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* Main */
#subjectsNav {
 list-style: none;
}
#subjectsNav li {
 width: 70px;
 display: block;
 float: left;
 position: relative;
}
#subjectsNav li:hover > ul {
 display: block;
}
/* Sub-menu */
 #subjectsNav ul {
 list-style: none;
 left: 0;
 margin: 0;
 padding: 0;
 display: none;
 position: absolute;
 z-index: 99999;
}
#subjectsNav ul li {
 float: none;
 display: block;
}
#subjectsNav ul ul {
 top: 0;
 left: 70px;
}