путь к решению найден. Вкратце - обернуть выпадающие менюшки в div и использовать для этого div display:flex;
фрагмент html
Код:
<td width="13%" bgcolor="f7efd6" valign="top">
<ul class="menu">
<li class="p_menu"><a href="#">Главная </a>
<div class="zornet_ru">
<ul class="ulmainmenu">
<li class="licross"><a href="#">Сайт ZORNET.RU</a></li>
<li><a href="#">Скрипты сайта</a></li>
<li><a href="#">Шаблоны сайта</a></li>
<li class="ligreenbook"><a href="#">Дизайн портала как-то в мае причалил</a></li>
<li class="liredgrafik"><a href="#">Скрипты и шаблоны</a></li>
<li class="ligreenbook"><a href="#">Все для сайта uCoz</a></li>
</ul>
<ul class="ulmainmenu">
<li><a href="#">Сайт ZORNET.RU</a></li>
<li class="licross"><a href="#">Скрипты сайта</a></li>
<li class="liredgrafik"><a href="#">Шаблоны сайта</a></li>
<li><a href="#">Дизайн портала</a></li>
<li class="ligreenbook"><a href="#">Скрипты и шаблоны</a></li>
<li><a href="#">Дизайн портала как-то в мае причалил</a></li>
</ul>
</div>
</li>
<li class="p_menu"><a href="#">Поиск</a>
<ul class="v_menu">
<li class="liredgrafik"><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li class="liredgrafik"><a href="#">подменю</a></li>
</ul>
</li>
<li><a href="#">Регестрация</a></li>
<li class="p_menu"><a href="#">Карта сайта</a>
<ul class="v_menu">
<li class="liredgrafik"><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
<li><a href="#">подменю</a></li>
</ul>
</li>
<li><a href="#">О сайте</a></li>
</ul>
</td>
фрагменты css для вывода
Код:
li.licross {
list-style: none; /* Убираем исходные маркеры */
background: url(img/plus.png) no-repeat 0 4px; /* Параметры фона */
padding-left: 24px; /* Смещаем текст вправо */
font-size: 11px;
border: 2px double #c0c0c0; display:block;
border-radius: 5px;
line-height: 30px;
margin-bottom: 10px;
}
ul.menu {
list-style: none;
}
ul.ulmainmenu {
padding: 0; /* Убираем поля */
margin-left: 15px; /* Отступ слева */
}
br {
line-height: 10px;
}
.menu a{
background:#f7f3de;
color: #000;
padding: 5px;
display: block;
border-bottom: 1px solid #f7efd6;
transition: 0.5s all;
}
.sidebar{
width: 200px;
margin: 20px;
}
.menu a:hover{
background: #f7efd6;
padding: 10px 0 10px 20px;
}
.menu li:first-child a, .menu li .zornet_ru li:first-child a{
border-radius: 3px 3px 0 0;
}
.menu li:last-child a, .menu li .zornet_ru li:last-child a{
border-radius: 0 0 3px 3px;
border-bottom: 0;
}
.menu li .zornet_ru li a{
border-radius: 0;
}
.p_menu{position: relative;}
.v_menu{
position: absolute;
width: 100%;
left: 100%;
top: -9999px;
opacity: 0;
border-left: 10px solid transparent;
transition: 0.5s opacity;
}
.p_menu:hover .v_menu{
opacity: 1;
top: 0;
}
.zornet_ru{
position: absolute;
width: 400%;
left: 100%;
top: -9999px;
opacity: 0;
border-left: 10px solid transparent;
transition: 0.5s opacity;
}
.p_menu:hover .zornet_ru{
opacity: 1;
top: 0;
background:#f7f3de;
}
.zornet_ru{display:flex;}