如何在父级左侧创建下拉菜单？

我尝试，但太难了，所以我想你的帮助... 我想创建一个下拉菜单对齐，其中左边缘必须与主菜单的右边缘齐平。另外，子菜单应该在同一行上。问题是，我不知道如何...如何在父级左侧创建下拉菜单？

我能做到的，绝对定位的子菜单中的唯一的事情，但我认为这是太困难了，我有问题，当我调整窗口的大小...

这是一个例子：

这是一个的jsfiddle：

www.jsfiddle.net/fc1wggo3

我希望你能帮助我...

谢谢！

来源

2015-09-27 Borja

绝对定位儿童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; 
}

一旦屏幕尺寸低于菜单和子菜单的宽度，用媒体查询命中它以另一种方式进行格式化。

来源

2015-09-27 16:31:58 Orun

非常感谢!!!!! – Borja

我和上面的Gent有同样的观点，但是将菜单改为固定的宽度，并保持它固定以显示子菜单。在这里更新。

JS Fiddle

.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; 
}

来源

2015-09-27 16:47:17 ALFmachine

如何在父级左侧创建下拉菜单？

回答

相关问题