如何在父级左侧创建下拉菜单?
问题描述:
我尝试,但太难了,所以我想你的帮助... 我想创建一个下拉菜单对齐,其中左边缘必须与主菜单的右边缘齐平。另外,子菜单应该在同一行上。问题是,我不知道如何...如何在父级左侧创建下拉菜单?
我能做到的,绝对定位的子菜单中的唯一的事情,但我认为这是太困难了,我有问题,当我调整窗口的大小...
这是一个例子:
这是一个的jsfiddle:
www.jsfiddle.net/fc1wggo3
我希望你能帮助我...
谢谢!
答
绝对定位儿童ul.stato
子菜单内相对位置的父li.leaf
是做到这一点的最佳方式。
看到这个updated version of your jsfiddle。 这里要注意的关键CSS如下。您还可以用百分比声明right:
,如-100%
,以获得更流畅的设计。
ul li.leaf {
position: relative;
}
ul li.leaf ul.stato {
position: absolute;
right: -88px;
top: 0;
display:none;
}
一旦屏幕尺寸低于菜单和子菜单的宽度,用媒体查询命中它以另一种方式进行格式化。
答
我和上面的Gent有同样的观点,但是将菜单改为固定的宽度,并保持它固定以显示子菜单。在这里更新。
.block {
background-color: #646464;
border: 1px solid #505050;
border-radius: 0 10px 10px 0;
font-size: 1.045em;
margin-left: 5px;
padding: 15px 20px;
width: 150px;
position: relative;
}
.stato{
display:none;
}
.dropdown:hover .stato {
display:block;
position: absolute;
left:150px;
top: 92px;
}
非常感谢!!!!! – Borja