问题描述
我想根据< ul>
的长度创建一个带有几列的类别下拉菜单。
我想将每个子菜单项放在前一个子菜单项下,直到达到子菜单的高度。如果是这样,那么一切都应该放在一个新的列中。
这样的东西:
主类别
|
subcategory1 subcategory3
| subsub1为subcategroy1 | subsub1为subcategroy3
| subsub2为subcategroy1 |
| subcategory4
subcategory2 | etc ...
| subsub1为subcategroy2
| subsub2为subcategroy2
-------------------------- ------------------------------------------
//总高度的下拉
到这里
我使用 flex -flow
和实际工作良好的。但是我不能让我的下拉列表容器是全宽宽度的背景颜色。
我的HTML看起来像这样:
< div class = cats>
< ul>
< li class =item sub>
< a title =Babyhref =http://ministry.webshopapp.com/baby/class =itemLink>宝宝< / a>
< div class =subnav>
< ul class =flex-wrap>
< li class =subitem title>< a title =Borstvoedinghref =#class =title> something< / a>< / li&
< li class =subitem>< a title =ATTITUDEhref =#class =subitemLink> ATTITUDE< / a>< / li>
< li class =subitem>< a title =Apple Parkhref =#class =subitemLink> Apple Park< / a>< / li&
< li class =subitem title>< a title =Borstvoedinghref =#class =title> something< / a>< / li&
< li class =subitem>< a title =ATTITUDEhref =#class =subitemLink> ATTITUDE< / a>< / li>
< / ul>
< / div>
< / li>
< / ul>
< / div>
由于CSS使用这个:
.cats .subnav {
background:#fff none repeat scroll 0 0;
border:1px solid #eee;
padding:30px;
position:absolute;
text-align:left;
z-index:99;
display:none;
}
.cats .item.sub:hover .subnav {
display:block;
}
.flex-wrap {
background:#fff none repeat scroll 0 0;
display:flex;
flex-flow:column wrap;
height:200px;
}
.subnav .subitem {
background:#fff none repeat scroll 0 0;
line-height:36px;
}
那么如何让 .subnav $
请参考下面的css代码:
添加左
和右
到 .cats。 subnav
.cats .subnav {
right:0;
left:0;
}
I'm trying to create a category dropdown menu with a few columns depending on the length of the <ul>
.
I want to place each submenu item underneath the previous one until the height of the submenu is reached. If so then everything should be placed in a new column.
Something like this:
Main category
|
subcategory1 subcategory3
|subsub1 for subcategroy1 |subsub1 for subcategroy3
|subsub2 for subcategroy1 |
| subcategory4
subcategory2 | etc...
|subsub1 for subcategroy2
|subsub2 for subcategroy2
--------------------------------------------------------------------
// total height of the dropdown
is reached here
I'm using flex-flow
and for that which actually works good. However I can't get my dropdown container to be full-width width a background color.
My HTML looks like this:
<div class="cats">
<ul>
<li class="item sub">
<a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
<div class="subnav">
<ul class="flex-wrap">
<li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
<li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
<li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
<li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
<li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
</ul>
</div>
</li>
</ul>
</div>
As CSS is use this:
.cats .subnav {
background: #fff none repeat scroll 0 0;
border: 1px solid #eee;
padding: 30px;
position: absolute;
text-align: left;
z-index: 99;
display:none;
}
.cats .item.sub:hover .subnav {
display: block;
}
.flex-wrap {
background: #fff none repeat scroll 0 0;
display: flex;
flex-flow: column wrap;
height: 200px;
}
.subnav .subitem {
background: #fff none repeat scroll 0 0;
line-height: 36px;
}
SO how can I make .subnav
to fill the background for as much needed?
Please refer the below css code:
Add left
and right
to .cats .subnav
.cats .subnav {
right: 0;
left: 0;
}
这篇关于使容器全宽与flex的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!