Question

我想在此处的下拉菜单中为这些项目添加第二列http://www.kingadlerhomedecor.com/store/我有一个很大的项目列表，这些项目将添加到类别＆＃39; MEBLE＆＃39;但是当只有一列时，我不能有一个很长的列表，如果列表可以分成两列，我将被排序。请帮忙。

    /* 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*/

Answer 1

首先，看起来您需要扩展.dropdown元素。目前，内联样式为width:300px。我要么增加（500px看起来对我好）为2列腾出空间或删除内联样式并将其添加到样式表（＆lt; - 推荐）。

从那里你可以将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
}

如何在下拉菜单中创建两列

1 个答案: