Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  

Показать сообщение отдельно

Старожил


Сообщения: 282
Благодарности: 1

Профиль | Сайт | Отправить PM | Цитировать


путь к решению найден. Вкратце - обернуть выпадающие менюшки в 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;}

-------
настоящему корейцу завсегда везде ништяк!


Отправлено: 20:09, 12-08-2019 | #8