I want to remake the site menu, as on the site midiltd.ru (Left), so that when you hover over a category, a submenu will be put forward. Here is the menu code that is on the site.

#left_block{ width: 200px; float: left; position: relative; padding: 10px; margin-right: 5px; } .one_block{ width: 100%; //border: 1px solid #a8a8a8; border-radius: 5px; background: #efefef; box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1); margin-bottom: 30px; } .block_head{ padding: 5px 0 0px 0; text-align: center; font-size: 17px; font-weight:bold; color: #00007F; } .block_body{ padding: 10px 10px 10px 10px; } ol, ul { list-style: none; } li.menu_catalog{ padding-bottom: 2px; padding-top: 3px; color: black; } ul.menu{ list-style: none; text-align: center; height: 100%; width:100%; } li.menu{ display: inline; margin-left: 10px; margin-right: 50px; line-height: 30px; font-weight:normal; } a.menu, a.menu_curr{ color: #fff; text-decoration: none; } div.menu_catalog{ padding-top: 10px; } li.menu_catalog{ padding-bottom: 2px; padding-top: 3px; color: black; } li.menu:hover, li.menu_curr{ display: inline; margin-left: 10px; margin-right: 50px; text-decoration: none; } li.menu_catalog:hover, li.menu_child_catalog:hover, li.menu_curr_catalog{ font-weight: bold; cursor: pointer; } a.menu_catalog, a.menu_curr_catalog, a.menu_child_catalog{ color: black; text-decoration: none; } a.menu_catalog{ color: black; text-decoration: none; } 
 <div id="left_block"> <div class="one_block"> <div class="block_head"> Каталог товаров </div> <div class="block_body"> <div class="catalog"> <div id="menu_catalog"> <ul class="menu_catalog"> <li class="menu_catalog"><a href="#" class="menu_catalog">Китай</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Япония</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Африка</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Австралия</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">США</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Омск</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Саратов</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Самара</a></li> <li onclick="el = document.getElementById('parent140'); el.style.display = (el.style.display=='none')?'block':'none';" class="menu_catalog">Тепло</li> <ul class="menu_parent" id="parent140" style="display: none;"><li onclick="el = document.getElementById('parent123'); el.style.display = (el.style.display=='none')?'block':'none';" class="menu_catalog">- Москва</li> <ul class="menu_parent" id="parent123" style="display: none;"><li class="menu_catalog"><a href="#" class="menu_catalog">Россия</a></li> <li class="menu_catalog"><a href="#j" class="menu_catalog">Города</a></li> </ul> <li class="menu_catalog"><a href="#" class="menu_catalog">- Дома</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Самолеты</a></li> </ul> <li onclick="el = document.getElementById('parent119'); el.style.display = (el.style.display=='none')?'block':'none';" class="menu_catalog">Вертолеты</li> <ul class="menu_parent" id="parent119" style="display: none;"><li class="menu_catalog"><a href="#" class="menu_catalog">Лодки</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Мотоциклы</a></li> <li class="menu_catalog"><a href="#" class="menu_catalog">Машины</a></li> </ul> </ul> </div> </div> </div> </div>

  • Site menu, as the site is on the site. Please clarify all this link sites. Do you want to remake the code that you showed here to have similar functionality, as on the site midiltd.ru (Left)? - Sergey Nudnov
  • the key to a successful code lies in its minimization and simplicity, alas, when looking through a heap of extra classes, some distant Spanish shame arises from the elements: < - MoloF
  • Yes, I want a menu like midiltd.ru, but with my html code - Funny World

2 answers 2

Example

 * { padding: 0; margin: 0; box-sizing: border-box; } .menu { max-width: 330px; } .menu li { border: 1px solid #666; background: #fff; position: relative; list-style: none; } .menu a { color: #000; text-decoration: none; display: block; padding: 5px; font-size: 16px; } .submenu { opacity: 0; z-index: -1; position: absolute; top: 0; left: 100%; transform: translateX(20px); transition: transform .3s ease, opacity .4s ease; } .menu li:hover .submenu { opacity: 1; z-index: 1; transform: translateX(0); } .menu a:hover, .menu > li:hover > a { color: #fff; background: #00f; } 
 <ul class="menu"> <li><a href="#">Menu</a> <ul class="submenu"> <li><a href="#">SubMenu</a></li> <li><a href="#">SubMenu</a></li> </ul> </li> <li><a href="#">Menu</a> <ul class="submenu"> <li><a href="#">SubMenu</a></li> <li><a href="#">SubMenu</a></li> </ul> </li> <li><a href="#">Menu</a> <ul class="submenu"> <li><a href="#">SubMenu</a></li> <li><a href="#">SubMenu</a></li> </ul> </li> <li><a href="#">Menu</a> <ul class="submenu"> <li><a href="#">SubMenu</a></li> <li><a href="#">SubMenu</a></li> </ul> </li> </ul>

  • Is it possible without changing the html code? - Funny World
  • The principle of solution for your markup is the same as in the example - soledar10
  • as an option, instead of hiding an element, you can completely hide it with the help of visibility - MoloF
  • MoloF - I do not see a problem with this, use the version that you need (display; none, visibility: hidden, scale (0)) - soledar10
  • Thank you so much! - Funny World

If I understand correctly, do you need another to drop out when you are on one list? In this case, you can place one list inside another and hide it through display:none; and then set display:block; when you hover over an item in a list, inside which there is a hidden list.

  • Well, I need a menu like midiltd.ru - Funny World