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

Question

我正在尝试创建一个居中的纯 CSS 下拉菜单，但在实施过程中遇到困难。问题总结：

第一个菜单是透明的并且与另一个菜单重叠，这是不应该的
我无法并排放置菜单
我无法将页面上的菜单居中
我无法摆脱 link 背景和列表边缘之间的透明间隙
我想 select 单击 link 周围的框。现在我必须单击 link 本身。

这是一个 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;
}

所做的更改

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

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

我无法并排放置菜单

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

我无法将页面上的菜单居中

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

我无法摆脱 link 背景和列表边缘之间的透明间隙

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

我想 select 单击 link 周围的框。现在我必须点击 link

我将锚元素从内联更改为块并赋予它全宽。

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

How do I create a centered pure CSS drop down menu that doesn't overlap other menus?

html

css

drop-down-menu