Выпадающее меню и z-index слоев

[tragbang]

Доброго времени суток Уважаемые форумчане. При верстке горизонтального выпадающего меню столкнулся с проблемой: необходимо выпадающие подпункты поместить под основные (всего на пару пикселей вверх, что бы перекрыть бордер и создать непрервыную обводку. Как здесь:

Но при верстке получается, что выпадающие пункты имеют абсолютное позиционирование и находяться слоем выше, чем их родительский список, что привод к следующему результату:

Вот код html:

<ul id="menuhead">
                <li id="lap1"><a href="#">Пункт 1</a>
                    <ul id="ldp1">
                        <li class="podmenu"><a href="#">Управление объявлениями</a></li>
                    </ul>
                </li>
                <li id="lap2"><a href="#">Пункт 2</a>
                    <ul id="ldp2">
                        <li class="podmenu"><a href="#">Подпункт 2.1</a></li>
                        <li class="podmenu"><a href="#">Подпункт 2.2</a></li>
                        <li class="podmenu"><a href="#">Подпункт 2.3</a></li>

                   </ul>
                </li>
                <li id="lap3"><a href="#">Пункт 1</a>
                    <ul id="ldp3">
                        <li class="podmenu"><a href="#">Подпункт 3.1</a></li>
                        <li class="podmenu"><a href="#">Подпункт 3.2</a></li>

                    </ul>
                </li>
         </ul> 

css:

#menuhead {
  margin: 0;
  padding: 0;
  height: 40px;
  position: relative;
  }
/* 1. Задаем высоту и цвет пунтктов основного меню*/
#menuhead #lap1,#menuhead #lap2,#menuhead #lap3 {
  list-style: none;
  float: left;
  background-color: #FFFFFF;
  height: 25px;	
}
.podmenu{
  list-style: none;
  float: left;
  background-color: #FFFFFF;
  height: 25px;	
}


/* 1.Задаем размеры, стиль, цвет, и др. настройки текста */
#menuhead li a {
  color: #009;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #586565;
  display: block;
  text-decoration: none;
  margin-left: 5px;
  margin-right: 5px;
}

/* 1.Цвет текста при наведении курсора*/
#menuhead li a:hover {
  color: #FF6600;
}

/* 1.Задаем положение, цвет блока и бордер основного меню при наведении курсора*/
#lap1,#lap2,#lap3{
    position: relative;
    }

 #lap1:hover {
  background-color: #FF00FF;
  position: relative;
  border: 2px solid #000000;
 }
#lap2:hover {
  background-color: #FF00FF;
  position: relative;
  border: 2px solid #000000;
 }

#lap3:hover {
  position: relative;
  background-color: #FF00FF;
  border: 2px solid #000000;
  }

/*Устанавливаем блочное положение текста при наведении курсора на пункты основного меню*/
#lap1:hover #ldp1, #lap2:hover #ldp2,#lap3:hover #ldp3
{
  display: block;
}


/*1. Меняем цвет текста при наведение на блок главного меню*/
#menuhead li.hover a,
#menuhead li:hover a {
  color: #586565;
}

/*1. Задаем цвет текста выпадающего меню*/
#menuhead li.hover ul li a,
#menuhead li:hover ul li a {
  color: #586565;
  font-weight: normal;
}

/*1. Меняем цвет текста при наведение на блок выпавшего меню*/
#menuhead ul li a:hover {
  color: #006699!important;
}


/* 1. Устанавливаем размеры, положение и бордер блока выпадающего меню
*/
#ldp1 {
  margin: 0px;
  padding: 0;
  display: none;
  height: 20px;
  position: absolute;
  left: 0px;
  top: 23px;
  width: 184px;
  height: 25px;     
  padding-left: 2px;
  padding-right: 2px;
  background-color: #FFFFFF;

}
#ldp2 {
  margin: 0;
  padding: 0;
  display: none;
  height: 20px;
  position: absolute;
  left: 0px;
  top: 23px;
  width: 120px;
  height: 100px;     
  padding-left: 2px;
  padding-right: 2px;
  background-color: #FFFFFF;
 }
#ldp3 {
  margin: 0;
  padding: 0;
  display: none;
  height: 20px;
  position: absolute;
  left: 0px;
  top: 23px;
  width: 165px;
  height: 50px;     
  padding-left: 2px;
  padding-right: 2px;
  background-color: #FFFFFF;
  }
#lap1:hover .podmenu{
    border: 1px solid #FF0000;
    }

 /* 1.Подсвечиваем строку при наведении на выпадающее меню
    2.Устанавливаем ширину подсветки каждого блока отдельно
  */   
#ldp1 li:hover {
  background-color: #C0C0C0;
  width:184px;
  }
#ldp2 li:hover {
  background-color: #C0C0C0;
  width:120px; 
 }
#ldp3 li:hover {
  background-color: #C0C0C0;
  width:165px; 
  } 

У кого какие мысли будут?

Edited October 5, 2011 by tragbang

[zSpx]

У вас li не закрыты.

[tragbang]

Спасибо. Это опечатка при вставке кода на форуме, сейчас поправлю.

[zSpx]

можно родителю задать

:after {

content:"";

position:absolute;

border-bottom:1px solid #000;

display:block;

bottom:-1px;

width:100%

}

[tragbang]

можно родителю задать

:after {

content:"";

position:absolute;

border-bottom:1px solid #000;

display:block;

bottom:-1px;

width:100%

}

Псевдоэлемент after не подходит, его старые версии браузеров не поддреживают, поэтому меню делаю без js и css3

[zSpx]

экспрешены отменили? тем более, что эмуляцию :after ie даже не почувствует.