Question

我尝试使用CSS创建一个带下拉子菜单的水平菜单。我用以下代码创建了菜单

HTML

<div class="main-menu-bar">
    <ul>
        <li><a href="http://google.com">Link1</a></li>
        <li><a href="http://google.com">Link2</a> </li>
        <li> <a href="#">Link 3</a>
            <div class="sub-menu-bar">
                <ul>
                    <li><a href="http://google.com">Sub Link1</a></li>
                    <li><a href="http://google.com">Sub Link2</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

CSS

.main-menu-bar {
    height: 30px;
    width: 100%;
    text-align: center;
    z-index: 1000;
    box-sizing: border-box;
    top: 0;
    margin: 0;
}
.main-menu-bar > ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
}
.main-menu-bar > ul > li {
    list-style-type: none;
    width: 15%;
    min-width: 140px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
}
.main-menu-bar > ul > li:hover .sub-menu-bar {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
}
.sub-menu-bar {
    display: none;
    background-color: green;
    box-sizing: border-box;
}
.sub-menu-bar > ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
}
.sub-menu-bar > ul > li {
    list-style-type: none;
    display: inline-block;
}

JSFIDDLE

我的问题是，子菜单链接（在Link3下）在页面上水平居中，但我希望它在父链接下。但我不能正确，如何解决这个问题？

Answer 1

将排名从absolute更改为relative

在.sub-menu-bar中，添加float:left;

更改为：

.main-menu-bar > ul > li:hover .sub-menu-bar {
    position: relative;
    display: block;
    width: 100%;
    left: 0;
}

<强> JSFiddle Demo

Answer 2

改变＆＃34;职位：绝对＆＃34;在班级＆＃34; .main-menu-bar＆gt; UL＆GT;李＆＃34;并在课程＆＃34; menu-bar-.sub＆gt; UL＆GT;李＆＃34;添加：

     clear: both; 
     float: left; 
     width: 100%; 
     text-align: center;

JSfiddle

水平菜单下拉链接位置问题

2 个答案: