Проблемка с выпадающим меню

Хочу сделать так что бы из одного пункта в меню при наведении курсора выпадал список подменю. Но что-то не получается подобрать клас в цсс которому нужно задать параметры.

Код:

	<div class="span-24">

				<div class="navcontainer">

					<ul id="nav">

						<li <?php if(is_home()) { echo ' class="current-cat" '; } ?>><a href="<?php bloginfo('url'); ?>">Главная</a></li>

<li>

	<a href="ххх">тест 1</a>

</li>		

<li>

	<a href="ххх">тест 2</a>

                <ul>

                             <li>

                                    <a href="ххх">тест 2.1</a>

                                    <a href="ххх">тест 2.1</a>

                            </li>

                </ul>

</li>		

		

<li>

	<a href="ххх">Карта сайта</a>

</li>



			</ul>

				</div>

			</div>	 

Цсс:

.navcontainer {

	height: 32px;

	background: #01A620;



    padding-left: 10px;

	}

	

#nav {

	height: 32px;

	}



#nav, #nav ul { 

	padding: 0;

	margin: 0;

	list-style: none;

	line-height: 1;

	}

#nav {

	margin-bottom: 1px;

	}

	

#nav ul {

	float: left;

	list-style: none;

	margin: 0px 0px 0px 0px;

	padding: 0px;

	}

	

#nav li {

	float: left;

	list-style: none;

	margin: 0px;

	padding: 0px;

	}

	

#nav ul li {

	list-style: none;

	margin: 0px;

	padding: 0px;

	}



#nav li a, #nav li a:link {

	color: #FFFFFF;

	display: block;

    margin: 0px 6px 0px 0;

	padding: 10px 14px;

	text-decoration: none;

	font-size: 12px;

	font-weight: bold;

    font-family: Arial, Helvetica, Sans-serif;

	text-transform: uppercase;

	}

	

#nav li a:hover, #nav li a:active{

	background: #FFFFFF;

	color: #8B008B;

	display: block;

	text-decoration: none;

	}

	

#nav  li.current-cat a {

	color:#8B008B;

    background: #FFFFFF;

	}



#nav li:hover, #nav li.sfhover { 

	position: static;

	}

Заранеее всем огромное спасибо!!!