首先,这是我构建的下拉/可折叠菜单。
至于小提琴中显示的预览中的“菜单”和“菜单项”是什么 - Channels,Search和About Us是菜单,而单击菜单时下拉/滑出的菜单是菜单项。
截屏:
我position: absolute;
在菜单项 ( .collapse
) 和position: relative;
菜单上使用。
相关代码(更多在小提琴中):
/* Menu: <li class="float-left top-menu">... */
.top-menu {
position: relative;
}
/* Menu-Item: <div id="channels-menu-item-container" class="collapse">... */
.collapse {
position: absolute;
width: 570px;
z-index: 1000;
padding: 0;
margin: 0;
color: #222;
background-color: #fff;
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
position: relative;
是否也可以在“菜单项”( )上实现相同的功能.collapse
?
注意:在您使用小提琴提交答案之前,请确保通过单击每个菜单并比较两个小提琴(您的和我的)中的菜单功能相同(以确认没有菜单项因改变定位)。
当然,您可以添加额外的 HTML 和 CSS。
是的,我徒劳地尝试了几个小时,并想看看这是否可能。