Выпадающее вверх меню 

Уважаемые интернет -гуру. пожалуйста подскажите.
Есть такое меню
HTML
<ul id="cssmenu">
<li><a href="#">новости</a>
</li>
<li><a href="#">модели</a>
<ul>
<li><a href="#">Дети</a></li>
<li><a href="#">Юноши с 16 лет</a></li>
<li><a href="#">Девушки с 16 лет</a></li>
</ul>
</li>
<li><a href="#">проекты</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">свободный кастинг</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">преподаватели</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">о нас</a>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><a href="#">наши работы</a>
<ul>
<li><a href="#">Публикации</a></li>
<li><a href="#">Наши работы</a></li>
</ul>
</li>
</ul>


и СSS
ul#cssmenu {
width:705px;
margin: 0;
border: 0 none;
padding: 0;
list-style: none;
background: #ffffff;
height: 20px;
font: bold 12px/28px Verdana, Arial;

}

ul#cssmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
display: inline;
list-style: none;
position: relative;
height: 25px;

}

ul#cssmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;

}

ul#cssmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;

}

ul#cssmenu ul li {
width: 150px;
float: left;
display: block !important;
display: inline;

}

/* Main Menu */
ul#cssmenu a {
border: 0px;
padding: 0 10px;
float: none !important;
float: left;
display: block;
border-bottom: #000000 1px solid;
background: #ffffff;
color: #000000;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
background: #000000;
color:#ffffff;

}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
float: none;
background: #000000;
color: #ED1B24;

}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
border-top: 1px solid #FFFFFF;
background: #000000;
color:# ED1B24;

}

ul#cssmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 170px;

}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
display: block;
}

Проблема в том, что я никак не могу сделать его выпадающем вверх, хотя думаю что это возможно....через z-index или отрицательные значения margin. Подскажите если можете. Вопрос жизни и смерти