website fly out side nav bar

[casfan]

Im wanting to make nav bar that expands
so on the page you's see
HOME
Info
then when you roll over info the other <li> is displayed.

 <div id="sidecol">
                <ul id="mainnav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#"Info</a></li>
                    <ul>
                        <li><a href="#">List</a></li>
                        <li><a href="#">Holiday Dates</a></li>
                        <li><a href="#">Brochure</a></li>
                    </ul>
                   
                </ul>
            </div><!-- end of side coloum -->

CSS

#mainnav ul, #mainnav li {
    padding-top:15px;
    font-family:"American Typewriter", Arial, Calibri, sans-serif;
    list-style:none;
    text-align:center;
    font-size:20px;
    text-align:center;
}

#mainnav a, #mainnav a:visited {
   text-decoration: none;
   color:#000;
}

#mainnav a:hover {
    color:#ffcc00;

How difficult is it to do?

TIA

 

[Richard King]

Im wanting to make nav bar that expands
so on the page you's see
HOME
Info
then when you roll over info the other <li> is displayed.

 <div id="sidecol">
                <ul id="mainnav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#"Info</a></li>
                    <ul>
                        <li><a href="#">List</a></li>
                        <li><a href="#">Holiday Dates</a></li>
                        <li><a href="#">Brochure</a></li>
                    </ul>
                   
                </ul>
            </div><!-- end of side coloum -->

CSS

#mainnav ul, #mainnav li {
    padding-top:15px;
    font-family:"American Typewriter", Arial, Calibri, sans-serif;
    list-style:none;
    text-align:center;
    font-size:20px;
    text-align:center;
}

#mainnav a, #mainnav a:visited {
   text-decoration: none;
   color:#000;
}

#mainnav a:hover {
    color:#ffcc00;

How difficult is it to do?

TIA

google accordian menu