[niZE]

спасибо большое за ответы.товарищ Aetae, абсолютно верно меня понял.Однако у меня возникли некоторые трудности:

<style>
#menu_bg ul li a{
	background-image:url(images/menu_punkt.png);
	background-position:top;
	background-repeat:no-repeat;
	height: 45px;
	color: #65b2b6;
	display: block;
	text-decoration:none;
	width: 184px;
	text-align:center;
	line-height:45px;
	cursor:pointer;
	
}
#menu_bg ul li a:hover{
	background-image:url(images/menu_punkt.png);
	background-position:bottom;
	width: 184px;
	height:45px;
}

#menu_bg ul li ul{
	list-style:none;
	width: 100%;
	display: none;
	margin: 0 auto;
	padding: 0;
}

#menu_bg ul li ul li a{
	background-image:none;
	height: 34px;
	color: #65b2b6;
	display: block;
	margin: 0 auto;
	border-left: 1px solid #cfcfa9;
	border-right: 1px solid #cfcfa9;
	background-color: #f2f4d3;
	text-decoration:none;
	font-size:14px;
	overflow:hidden;
	width: 160px;
	text-align:center;
	line-height:34px;
}
#menu_bg ul li ul li a:hover{
	background-image:url(images/menu_onhover.png);
	width: 164px;
	height: 34px;
	font-size: 16px;
}
</style>

<script type='text/javascript'>
divAccor = document.getElementById('menu_bg');
getLi = divAccor.getElementsByClassName('underLi');
for(i=0;i<getLi.length;i++){
var menuA=getLi.item(i).getElementsByTagName('a'),f;
var height=parseInt(34); //высота блока, если она едина, то лучше задать просто вручную цифрой
while(menuA.scrollHeight>height&&(f=parseInt(menuA.style.fontSize)-1)>0)menuA.style.fontSize=f+'px'; //пока реальныя высота больше назначенной (и font-size>0 - мало ли=) ) уменьшаем размер шрифта на 1px;
}
function menuAccordion() {
			var lis = new Array();
			var ulInLi = new Array();
			divAccor = document.getElementById('menu_bg');
			getLi = divAccor.getElementsByTagName('li');
			n = 0;
			k = 0;
				for(i=0;i<getLi.length;i++){
					ulObj=getLi.item(i).getElementsByTagName('ul');
						if(ulObj.length > 0){
						lis[n]=getLi.item(i);
						n++;
						}
				}
				for(i=0;i<lis.length;i++){
					lis[i].onclick = function() {
						for(j=0;j<lis.length;j++){
							if(lis[j].getElementsByTagName('ul').item(0).style.display != this){
								lis[j].getElementsByTagName('ul').item(0).style.display = 'none';				
							}
						}
						ulObj = this.getElementsByTagName('ul').item(0);
							if(ulObj.style.display == 'block'){
								ulObj.style.display = 'none';
							} else {
								ulObj.style.display = 'block';
							}
						mainResize();
						}
					}
		}
</script>

<div id='menu_bg'>
                            <li><a href='index.html'>Главная</a></li>
                            <li><a href='about.html'>О Нас</a></li>
                            <li><a href='javascript: return false'>Услуги</a>
                                <ul>
                                    <li class="underLi"><a href='credit.html'>Кредиты</a></li>
                                    <li class="underLi"><a href='deposit.html'>Депозиты</a></li>
                                    <li class="underLi"><a href='card.html'>Карточки</a></li>
                                </ul>
                            </li>
                            <li><a href='javascript: return false'>Интернет-Банк</a>
                                                            <ul>
                                    <li class="underLi"><a href='calcul.html'>Депозитный Калькулятор</a></li>
                                    <li class="underLi"><a href='klient_bank.html'>Клиент-Банк</a></li>
                                </ul>
                            </li>
                            <li><a href='filia.html'>Филиалы</a></li>
                            <li><a href='partners.html'>Наши Партнёры</a></li>
                        </ul>
                    </div>

Вообщем у меня при преминении кода который мне дал Aetae смещаються стили.Li первого уровня вообще без стиля,а вот Li второго уровня почему-то получают стиль первого уровня.