如何创建不与其他菜单重叠的居中纯CSS下拉菜单？

Question

我正在尝试创建一个居中的纯CSS下拉菜单，但在实现方面遇到了麻烦。 问题总结：

1. 第一个菜单是透明的，并且与其他菜单重叠，这是不应该的
2. 我无法并排放置菜单
3. 我无法在页面上将菜单居中
4. 我无法摆脱链接背景和列表边缘之间的透明间隙
5. 我想通过单击链接周围的框进行选择。 现在，我必须单击链接本身。

这是一个JSFiddle示例： http : //jsfiddle.net/nxq55ppr/1/

这是HTML：

<div class="menuitems">
<div class="menuouter"><div class="menuinner">First menu<ul>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
</ul></div></div>
<div class="menuouter"><div class="menuinner">Second menu<ul>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
    <li><a class="menuitem " href="#">Lorem</a></li>
    <li><a class="menuitem " href="/#">Ipsum</a></li>
</ul></div></div>

这是CSS：

.menuinner { 
    margin: 10px;
    padding: 10px; 
    border: 2px solid purple; 
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: absolute;
}
.menuinner > ul { display: none; }
.menuinner:hover > ul { padding: 0; margin: 0; list-style-type: none; display: block; background: #f9f9f9; border-top: 1px solid purple;}
.menuinner:hover > ul > li { list-style-type:none; padding: 5px; display: block;}
.menuinner:hover > ul > li:hover { background: #ccc;}
.menuinner:hover > ul > li:hover > a { color: red; }

Answer 1

这是您的小提琴的更新版本

我还为您的CSS添加了框大小调整规则

*, *:before, *:after {
 box-sizing: border-box;
}

所做的更改

1. 第一个菜单是透明的，并且与其他菜单重叠，这是不应该的

您的.menuinner没有背景色，因此显得透明

2. 我无法并排放置菜单

您的.menuinner具有指定的宽度，但父.menuouter具有完整宽度

3. 我无法在页面上将菜单居中

您的.menuinner具有绝对位置。

4. 我无法摆脱链接背景和列表边缘之间的透明间隙

您的ul元素具有默认的顶部和底部边距。

5. 我想通过单击链接周围的框进行选择。 现在我必须点击链接

我将锚元素从内联更改为块，并给其完整宽度。