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

Question

我尝试但是太难了，所以我希望你的帮助...... 我想创建一个对齐的下拉菜单，其中左边缘必须与主菜单的右边缘齐平。此外，子菜单应该在同一行。问题是我不知道怎么......

我唯一可以做的，绝对定位子菜单，但我认为这太难了，当我调整窗口大小时我遇到了问题......

这是一个例子：

这是一个jsfiddle：

 www.jsfiddle.net/fc1wggo3

我希望你能帮助我......

谢谢！

Answer 1

将孩子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;
}

一旦屏幕尺寸低于菜单和子菜单的宽度，请使用媒体查询点击它以另一种方式格式化。

Answer 2

我与上面的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;
}