Как создать две колонки в выпадающем меню
Я хочу добавить второй столбец для элементов в выпадающем меню здесь http://www.kingadlerhomedecor.com/store/ У меня есть большой список предметов, которые должны быть добавлены в категорию «MEBLE», но у меня не может быть действительно длинного списка, когда есть только один столбец, если список можно разделить на два столбца, я буду отсортирован. Пожалуйста помоги.
/* MENU */
.primary-define #menu {
text-align: left;
font-family: helvetica, Arial;
/*background-color: #999;*/
}
.primary-define #menu-inner {
position: relative;
font-family: helvetica, Arial;
background-color: #999; /*No color was added origninally - added to make it grey*/
}
.primary-define .mainmenu {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.primary-define .mainmenu li {
margin: 0;
padding: 0;
position: relative;
}
.primary-define .mainmenu > li {
float: left;
/*background-color: #999;*/
}
.primary-define .mainmenu li a {
color: #666; /*originial #666*/
display: block;
font-size: 10px; /*original 15px */
padding: 0.5px 1px; /*20px 25px */ /*Padding for the dropdown elements*/
text-decoration: none;
/*background-color: #999;*/
}
.primary-define .mainmenu > li > a {
color: #fff;
padding: 15px 25px; /*35px*/
font-size: 14px; /*original 18px */
font-weight: 600;
line-height: 100%;
font-family: helvetica, Arial;
}
.primary-define .mainmenu > li:hover > a,
.primary-define .mainmenu > li.active > a {
background-color: rgba(0, 0, 0, 1); /*rgba(0, 0, 0, 0.2)*/
/*font-size: 15px;*/
}
.primary-define .mainmenu li .dropdown-container {
top: 99%;
overflow: hidden;
position: absolute; /*absolute*/
padding-left: 1px; /*added by yuvi*/
font-size: 30px; /*added by yuvi*/
}
.primary-define .mainmenu li .dropdown {
margin-top: -300px; /*-999px*/
background-color: #fff;
border-left: 1px solid #eee;
border-bottom: 1px solid #eee;
font-size: 30px; /*added by yuvi*/
padding: 10px;
}
.primary-define .mainmenu li:hover .dropdown {
margin-top: 0;
/*font-size: 30px; added by yuvi*/
}
}
.primary-define .mainmenu ul {
margin: 0;
float: left;
width: auto; /*249px*/
list-style-type: none;
border-right: 1px solid #eee;
}
.primary-define .mainmenu ul li:hover a,
.primary-define .mainmenu ul li.active a {
background-color: #eee; /*orginiarl #eee*/
Решение
Во-первых, похоже, вам нужно расширить .dropdown элемент. В настоящее время есть встроенный стиль width:300px, Я бы либо увеличил это значение (мне показалось 500 пикселей), чтобы освободить место для 2 столбцов, либо убрал встроенный стиль и добавил его в таблицу стилей (<- рекомендуемые).
Оттуда вы можете установить ширину ul элементы до половины ширины dropdown и отпустить их.
.primary-define .mainmenu li .dropdown ul {
width: 50%;
float: left;
list-style: none; #This is to remove the circle next to the list items
}
Другие решения
Других решений пока нет …