Какой раз я сталкиваюсь с проблемой: если в одном месте вставишь элемент (рисунок, текст), то в каком-то другом месте происходит выталкивание других элементов. Как обойти эту проблему в коде, для того чтобы рисунки (иконки) располагались слева от пунктов меню Каталог товаров (и чтобы пункты меню типа Бытовая техника для кухни, Бытовая техника для дома располагались по центру блоков) вот так:
.menu {
position: relative;
width: 370px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 0.5em 0 0.5em 0.3em;
cursor: pointer;
}
ul.level1 {
border: 1px solid thistle;
}
ul.level1>li {
background-color: #fff;
border-bottom: 1px solid thistle;
}
ul.level1>li:last-child {
border-bottom: none;
}
ul.level2 {
position: absolute;
top: -35px;
left: 100%;
max-width: 559px;
max-height: 1010px;
padding: 0.5em 0.3em 0.5em 0.3em;
background-color: #fff;
border: 1px solid thistle;
visibility: hidden;
white-space: nowrap;
column-count: 2;
}
ul.level2>li {
padding: 0;
border-bottom: 1px solid #fff;
}
ul.level2>ul>li {
padding: 0;
}
ul.level2>li>ul>li {
padding: 0;
}
ul.level1>li:hover ul.level2 {
visibility: visible;
}
.menu a {
color: #333;
}
.alignblock {
text-align: center;
vertical-align: middle;
}
.submenu__title {
margin-bottom: 5px;
}
.submenu__title a {
display: block;
color: black;
font: 13px Roboto, Tachoma, Arial, sans-serif;
/* line-height: 1.5; */
text-decoration: none;
padding: 3px 5px;
}
.submenu__item {
/* margin-bottom: 0px; */
}
.submenu__item a {
display: block;
color: gray;
font: 13px Roboto, Tachoma, Arial, sans-serif;
text-decoration: none;
padding: 3px 5px;
}
<html>
<head>
<link rel="stylesheet" href="mysite.css">
</head>
<body>
<div class="mainwrap">
<div class="mainmenu">
<span>
<span>
<button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</span>
<span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
</span>
<nav class="menu">
<ul class="level1">
<li id="l1">
<div class="alignblock">Бытовая техника для кухни</div>
<ul class="level2">
<li class="submenu">
<ul>
<li class="submenu__title">
<a href="#">Крупная бытовая техника</a>
</li>
<li class="submenu__item">
<a href="#">Холодильники</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные камеры</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные лари</a>
</li>
<li class="submenu__item">
<a href="#">Плиты газовые </a>
</li>
</ul>
<ul>
<li class="submenu__title">
<a href="#">New title</a>
</li>
<li class="submenu__item">
<a href="#">Холодильники</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные камеры</a>
</li>
<li class="submenu__item">
<a href="#">Морозильные лари</a>
</li>
<li class="submenu__item">
<a href="#">Плиты газовые </a>
</li>
</ul>
</li>
</ul>
</li>
<li id="l2">
<div class="alignblock">Item 2</div>
</li>
<li id="l3">
<div class="alignblock">Item 3 +</div>
<ul class="level2">
<li>Sub-Item 3-1</li>
<li>Sub-Item 3-2</li>
<li>Sub-Item 3-3</li>
<li>Sub-Item 3-4</li>
<li>Sub-Item 3-5</li>
<li>Sub-Item 3-6</li>
<li>Sub-Item 3-7</li>
<li>Sub-Item 4-8</li>
</ul>
</li>
<li id="l2">
<div class="alignblock">Item 4</div>
</li>
<li id="l2">
<div class="alignblock">Item 5</div>
</li>
<li id="l2">
<div class="alignblock">Item 6</div>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
before
и какие есть еще методы для вставки иконки?