Tell me how to implement a submenu that will occupy the remaining width of the page (the submenu items are located one after another, the height of the menu depends on the number of items, as it is now). You can recommend a solution on both flexs and standard css features.
body { padding: 10px; font-size: 14px; line-height: 1.4; font-family: "Arial", sans-serif; } .main-menu { position: relative; width: 180px; margin: 0; padding: 0; list-style: none; } .main-menu a { display: block; margin-bottom: -1px; padding: 8px 14px; color: #0088cc; text-decoration: none; border: 1px solid #e5e5e5; } .main-menu a:hover { background-color: #f5f5f5; } .main-menu > li { /* position: relative; */ } .main-menu .sub-menu { display: none; position: absolute; width: 100%; top: 0; left: 170px; z-index: 10; margin: 0; padding: 0; list-style: none; } .main-menu > li:hover .sub-menu { display: flex; justify-content: space-between; } .sub-menu li a { background: #ccc; } <ul class="main-menu"> <li><a href="#company">Π ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a></li> <li><a href="#services">Π£ΡΠ»ΡΠ³ΠΈ</a> <ul class="sub-menu"> <li><a href="#1">Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ°</a></li> <li><a href="#2">ΠΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅</a></li> <li><a href="#3">ΠΠΎΠ½ΡΠ΅ΠΊΡΡ</a></li> </ul> </li> <li><a href="#team">Π‘ΠΎΡΡΡΠ΄Π½ΠΈΠΊΠΈ</a></li> <li><a href="#contacts">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> </ul> 