我有一个水平父列表.单击时,某些列表项会显示嵌套的垂直列表.如何强制垂直子列表中的项目与父列表项目的宽度相同?
见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/
父母李需要有位置:亲属;嵌套子菜单必须有宽度:100%;和位置:绝对;