Question

下面是我的js小提琴下拉菜单，但是如何让辅助下拉菜单在菜单底部列出一个水平栏。

CSS

#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width:700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

我正在尝试建立一个像这里找到的菜单。

http://www.pauledmonds.com/

Answer 1

您需要使用position：relative声明#menu，并从li中删除它。这样第二个ul将扩展到#menu的宽度。其次，你需要制作ul ul li {display：inline-block; }和最后一次ul ul {width：100％;左：0}

#menu li ul li {display: inline-block;}
#menu {
    display: inline-block;
    min-width: 600px;
    list-style:none;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}
#menu > li:hover > ul {
    border: 1px solid #FF0000;
    display: block;
    left: 0;
    width: 100%;
}

以下是工作示例的链接 - Click here

下拉菜单：下拉主菜单下方的水平列表

1 个答案: