如何强制嵌套列表项与父列表项的宽度相同? [英] How do I force nested list items to be the same width as parent list item?
本文介绍了如何强制嵌套列表项与父列表项的宽度相同?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个水平的父母名单.单击某些列表项时,会显示一个嵌套的垂直列表.如何强制垂直子列表中的项目与父列表项目的宽度相同?
I have a horizontal parent list. Some of the list items display a nested vertical list when clicked. How do I force the items in the vertical sub list to be the same width as the parent list item?
请参见 jsFiddle .
HTML:
<ul class="mainMenu horizontalMenu bulletless fullWidth bold">
<li class="showSubMenu">
<div>Resumes & Cover Letters ▾ </div>
<ul class="mainSubMenu bulletless">
<li><a>Resumes</a></li>
<li><a>Cover Letters</a></li>
<li><a>Interviews</a></li>
</ul>
</li><li><a>Other Link</a>
</li><li><a>Other Link</a></li>
</ul>
CSS:
.horizontalMenu li{
display: inline-block;
}
.mainMenu > li{
border: 1px solid black;
}
.mainMenu a, .mainMenu div{
display: block;
padding: 10px 20px;
}
.mainSubMenu{
position: absolute;
}
推荐答案
我对您的小提琴进行了更改. http://jsfiddle.net/BXnxc/2/
I did the change on your fiddle. http://jsfiddle.net/BXnxc/2/
父级li必须具有position:relative;
,嵌套子菜单必须具有width:100%;
和position:absolute;
The parent li needs to have position:relative;
and the nested submenu has to have width:100%;
and position:absolute;
这篇关于如何强制嵌套列表项与父列表项的宽度相同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文