Извеняюсь за едкость цветов.
зелёный это header
красный это main
синий это заголовок меню
штрихпунтирный это выпадающее меню при наведении.
если у main позиционирование не absolute то при раскрытии меню блок сдивагется в право. структура меню такая
<div class="menu">
<div class="header">
<img src="{$UrnPathTemplate}icon/menu1.png" />
<span class="title">Drugz A-Z</span>
<ul>
<li>Test text1</li>
<li>Test text2</li>
<li>Test text3</li>
<li>Test text4</li>
</ul>
</div>
.......
</div>
#headmenu .menu .header
{
float:left;
min-width: 185px;
padding-right: 15px;
padding-top:20px;
cursor: pointer;
}
#headmenu .menu .header ul
{
display: none;
margin-top: 26px;
width: 100%;
list-style-type:none;
padding-left:15px;
}
#headmenu .menu .header:hover
{
background-color: #efeeee;
position:relative;
z-index:10;
}
#headmenu .menu .header:hover > ul
{
display: block;
}
#headmenu .menu .header ul:hover
{
display: block;
}