Помогите плз найти решение, css

354

24 ноября 2016, 10:11

Здравствуйте, кто хорошо понимает css, помогите плз сделать меню в 2 колонки, как на фото

сейчас так:

Перепробовал свойства float, display inline block и массу всякого другого, но ничего не помогает( ссылка на тему http://onfilter.ru/?theme_preview=710287

Answer 1

ul внутри раскрывающегося блока сделать inline-block + 50% ширины, либо float: left + 50% ширины;

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>

Это как один из вариантов. Можно флексами, таблицами.