There is a page
and it has a submenu Large household appliances -> Refrigerators, Freezers, Freezers. There is also the code for this page
<html>
<head>
<!-- Кодировка веб-страницы -->
<meta charset="utf-8">
<!-- Настройка viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Подключаем Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
<style type="text/css">
.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: 0;
left: 100%;
min-width: 100%;
width: 559px;
background-color: #fff;
border: 1px solid thistle;
visibility: hidden;
column-count: 2;
white-space: nowrap;
}
ul.level2>li {
padding: 0.5em 0.3em 0.5em 0.3em;
border-bottom: 1px solid #fff;
}
ul.level2>li>ul>li {
margin-top: 0px;
margin-bottom: 0px;
}
ul.level1>li:hover ul.level2 {
visibility: visible;
}
.menu a {
color: #333;
}
.alignblock {
text-align: center;
vertical-align: middle;
}
</style>
</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><ul><li><a href="#">Крупная бытовая техника</a></li><li><a href="#">Холодильники</a></li><li><a href="#">Морозильные камеры</a></li><li><a href="#">Морозильные лари</a></li><li><a href="#"></a></li></ul></li>
<li>Sub-Item 1-2</li>
<li>Sub-Item 1-3</li>
<li>Sub-Item 1-4</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>
<script src="jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- Подключаем Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>There is also a page https://positronica.ru/.
It is required that the above submenu looks with the same distance between items as in the last figure, and also there is no distance to the menu item - Large household appliances. How to achieve this (tried to insert -
ul.level2>li>ul>li {
margin-top: 0px;
margin-bottom: 0px;
}Did not work out)?
Aucun commentaire:
Enregistrer un commentaire