Выпадающее вниз вертикальное меню на DLE

[Incestecide]

Проблема заключается в следующем: есть шаблон DLE c вертикальными менюшками которые выпадают вниз на уровни. Реализовано все таким макаром:

<ul id="nav">
            <li><a href="/">ГЛАВНАЯ</a></li>

            <li><a href="ССЫЛКА"> МЕНЮ </a>
                <ul>
             <li><a href="ССЫЛКА">НАЗВАНИЕ ПОДМЕНЮ 1 </a></li>

             <li id=""><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>
        </ul>

При "выпадении" подменюшек вниз как фон на заднем плане этих подменю отображается фон основного меню,

как мне убрать этот фон?

Выпадающее подменю Подменю с фоновой картинкой от меню

Если нужны стили из CSS предоставлю нужный кусок.

[tt48]

Два варианта.

1) Убрать весь фон, оставить его только у <a>

2) Задать конкретное значение высоты для пунктов меню и overflow: visible;/*стоит таким по умолчанию, можно не писать*/.

[Incestecide]

В CSS прописано следующее:

#nav, #nav ul
{
	font-size: 12px;
	font-weight: bold;
	list-style: none;
	margin: 0; 
	padding:0;
	float: left;
}
#nav li
{ 
	float: left;
	position: relative;
}
#nav li a
{  
    font-size: 12px;
	color: #000000;
	line-height: 47px;
	padding: 0 20px 0 20px;
	display: block;
	text-align: center;
	border-right:1px solid #9F9FA4;
	margin: 1px 0 0 0 ;
	font-family:"Calibri", "Arial";
	text-decoration: none;
}
	#nav li :hover
	{   z-index:100;
		background: url(../images/nav-bg2.gif) top repeat-x;
		color: #ffffff;
		text-decoration: none;		
	}

	#nav2 li :hover
	{   z-index:100;
		color: #000000;
		text-decoration: none;		
	}
#nav li ul {
z-index:100;
  display: none;
  position: absolute;
  padding:0;
  clear:both;
}
#nav li li a {
clear:both;
min-width:80px;
padding:0 5px 0 5px;
color:#000000;
font-size:12px;
line-height:25px;
  background:#EBE9E9;
  border-bottom:2px solid #B0B0B0;
  border-left: 1px solid #9F9FA4;
  margin: -1px 0 0 0;
}
#nav li li a:hover {
  background:#c5c4cd;
  clear:both;
}
#nav li:hover ul {
  display: block;
  clear:both;
}

Тегу <ul> на странице установлен id nav - <ul id="nav">

Теперь подробнее расскажите как мне избавиться от фона, который наследуется от <li>

Edited April 14, 2011 by Incestecide

[Incestecide]

Два варианта.

1) Убрать весь фон, оставить его только у <a>

2) Задать конкретное значение высоты для пунктов меню и overflow: visible;/*стоит таким по умолчанию, можно не писать*/.

1) не помогло - фон стал статистическим что не является желаемым результатом

2) фон исчез но меню стали выпадать горизонтально вбок а не вертикально вниз

В CSS заменил позиционирование :

#nav li
{ 
        float: left;
        position: relative;

на фиксированную высоту :

#nav li
{ 
        float: left;
        height: 20px;

и получил горизонтально выпадающее меню вместо бывшего вертикального

Edited April 14, 2011 by Incestecide