如何创建不与其他菜单重叠的居中纯 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

这是您的 fiddle 的更新版本

我还在你的 CSS 中添加了盒子大小规则

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

所做的更改

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

你的.menuinner 没有背景色，所以它看起来是透明的

1. 我无法并排放置菜单

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

1. 我无法使页面上的菜单居中

你的.menuinner有一个绝对位置。

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

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

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

我将锚元素从 inline 更改为 block 并赋予它全宽。