Добрый день, борюсь с этим багом второй день. Задача тривиальная сделать выпадающее вертикальное меню. Дело в том что элементы списка не растягиваются по всему содержимому.
Код HTML:
<ul id="horizontal-multilevel-menu">
<li class="RootMenu liSelected"><nobr><a href="/" class="root-item-selected">Главная страница</a></nobr></li>
<li class=Separator></li>
<li class="RootMenu "><a href="/about_us/" class="root-item">О компании</a>
<ul>
<li><nobr><a href="/about_us/history.php">История компании</a></nobr></li>
<li><nobr><a href="/about_us/direction/">Руководство компании</a></nobr></li>
<li><nobr><a href="/about_us/quality_policy.php">Политика в области качества</a></nobr></li>
<li><a href="/about_us/personnel_policy/" class="parent">Кадровая политика компании</a>
<ul>
</li>
</ul>
PHP код:
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul{
margin:0; padding:0;
min-height:27px;
list-style:none;
float:left;
}
#horizontal-multilevel-menu{z-index:4;width:100%;}
/*Links*/
#horizontal-multilevel-menu a{
display:block;
text-decoration:none;
text-align:center;
font-size:12px;
}
#horizontal-multilevel-menu li ul{}
#horizontal-multilevel-menu li ul li{display:inline-block; width:100%;border:#000 solid 1px;}
#horizontal-multilevel-menu li ul a{zoom:1;}
#horizontal-multilevel-menu li ul a{padding:5px 10px;}
#horizontal-multilevel-menu li{float:left; display:block;}
#horizontal-multilevel-menu li.RootMenu{height:40px;}
#horizontal-multilevel-menu li.liSelected{ background:#F3F4F4 url(images/bgnd_sel_3.jpg) repeat-x bottom;}
#horizontal-multilevel-menu li.RootMenu:hover,
#horizontal-multilevel-menu li.RootMenu.jshover{background:#F3F4F4 url(images/bgnd_sel_3.jpg) repeat-x bottom;}
#horizontal-multilevel-menu li ul li.jshover{background:none;}
/*Root items*/
#horizontal-multilevel-menu li a.root-item{margin:8px;}
#horizontal-multilevel-menu li.RootMenu.jshover ul{margin-top:7px;}
#horizontal-multilevel-menu li ul li.jshover ul{margin-top:-27px;}
/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected{
color:#823081;
margin:8px;
}
/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item{
}
/*Item-parents*/
#horizontal-multilevel-menu a.parent{
background: url(images/arrow.gif) center right no-repeat;
}
/*Denied items*/
#horizontal-multilevel-menu a.denied{
background: url(images/lock.gif) center right no-repeat;
}
/*Child-items: hover*/
#horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover{
/*hover*/
}
/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected{
}
/*Sub-menu box*/
#horizontal-multilevel-menu li ul{
position:absolute;
top:auto;
display:none;
z-index:500;
height:auto;
width:200px;
background:#F5F5F5;
border-top:1px solid #9630A8;
}
/*Sub-menu item box*/
#horizontal-multilevel-menu li li{width:100%;}
/*Item link*/
#horizontal-multilevel-menu li ul a{text-align:left;}
/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a{
/*color:#4F4F4F;*/
}
/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a{
/*color:#4F4F4F;*/
}
#horizontal-multilevel-menu li ul ul
{
margin:-27px 0 0 132px;
/*margin:-1.93em 0 0 11.6em;*/
}
#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul{
display:none;
}
#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,{
z-index:1000;
top:auto;
display:block;
}
/*Споратор*/
#horizontal-multilevel-menu li.Separator{
border-left:#CED1D1 solid 1px;
height:40px;
}