Hello, who understand css well, help plz make a menu in 2 columns, as in the photo enter image description here

now so enter image description here

I tried the properties of float, display inline block and a lot of other things, but nothing helps (link to the topic http://onfilter.ru/?theme_preview=710287

    1 answer 1

    ul inside the drop-down block make inline-block + 50% of the width, or float: left + 50% of the width;

     ul>li>a:hover~.sub, .sub:hover{ display: block; } .sub { display: none; position: absolute; width: 300px; } .sub ul { display: inline-block; vertical-align: middle; width: 50%; } .sub ul+ul { margin-left: -5px; } /* Дополнительная стилизация. */ *{ box-sizing: border-box; } ul { background: #333; padding: 0; margin: 0; text-align: center; } ul>li { display: inline-block; vertical-align: middle; position: relative; width: 30%; } ul>li>a { display: block; color: #fff; padding: 1rem; } .sub { background: #ccc; top: 100%; } .sub ul { background: transparent; } .sub ul li { display: block; width: 100%; padding: 1rem; } 
     <ul> <li> <a href="#">HOVER ME 1</a> <div class="sub"> <ul> <li>item-sub-1</li> <li>item-sub-2</li> <li>item-sub-3</li> </ul> <ul> <li>item-sub-1</li> <li>item-sub-2</li> <li>item-sub-3</li> </ul> </div> </li> <li> <a href="#">HOVER ME 2</a> <div class="sub"> <ul> <li>item-sub-1</li> <li>item-sub-2</li> <li>item-sub-3</li> </ul> <ul> <li>item-sub-1</li> <li>item-sub-2</li> <li>item-sub-3</li> </ul> </div> </li> <li><a href="#">item 3</a></li> </ul>

    This is one of the options. You can flex, tables.