【问题标题】：How to prevent overlapping dropdown menu with borders?如何防止与边框重叠的下拉菜单？
【发布时间】：2016-01-12 16:22:59
【问题描述】：
我有一个悬停下拉菜单，在悬停边框后，我的下拉菜单与菜单重叠。试图添加填充，但它更糟。如何调整下拉菜单的位置，知道我在不悬停时有一个 5px 边框透明，悬停时在底部变成一个 5px 实心边框？
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">Study</a></li><li>
<a href="#">Games</a>
<ul>
<li><a href="#">Riddles</a></li><li>
<a href="#">Flip card game</a></li><li>
<a href="#">Spot the mistake</a></li><li>
<a href="#">Multiple choice</a></li>
</ul>
</li><li>
<a href="#">Read</a></li><li>
<a href="#">Contact</a></li><li>
<a href="#">About Us</a></li>
</ul>
</div>
</div>
【问题讨论】：
标签：
html
css
drop-down-menu
【解决方案1】：
简短的答案是将margin-top: 5px; 添加到#nav ul ul，其中5px 与底部边框宽度的值相同。
请注意，以下样式集在悬停时输出梯形形状1 底部边框。
#nav ul li { border: 5px solid transparent; }
#nav ul li:hover { border-bottom: 5px solid #9e4a45; }
将第一行中的border 更改为border-bottom，它将输出一个真正的矩形形状。
我还重新组织了 CSS 表格布局，使表格自动居中（我猜你想要这样，但如果不这样做很容易更改）。并删除了下拉项中的边框样式。
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
border-bottom: 5px solid transparent;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
border-bottom-color: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li:hover li {
border-bottom-width: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">Study</a></li><li>
<a href="#">Games</a>
<ul>
<li><a href="#">Riddles</a></li><li>
<a href="#">Flip card game</a></li><li>
<a href="#">Spot the mistake</a></li><li>
<a href="#">Multiple choice</a></li>
</ul>
</li><li>
<a href="#">Read</a></li><li>
<a href="#">Contact</a></li><li>
<a href="#">About Us</a></li>
</ul>
</div>
</div>
此外，还可以使用:after + background 来获得相同的下边框样式。
Jsfiddle Example
#nav {
background-color: #e26a63;
}
#wrap {
display: table;
height: 100px;
margin: 0 auto;
}
#nav ul {
padding: 0;
margin: 0;
display: table-cell;
vertical-align: bottom;
}
#nav ul li {
display: inline-block;
}
#nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
#nav ul li:after {
content: "";
display: block;
height: 5px;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
margin-top: 5px;
}
#nav ul ul li {
display: block;
min-width: 200px;
}
/* hover */
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul li:after {
height: 0;
}
<div id="nav">
<div id="wrap">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">Study</a></li><li>
<a href="#">Games</a>
<ul>
<li><a href="#">Riddles</a></li><li>
<a href="#">Flip card game</a></li><li>
<a href="#">Spot the mistake</a></li><li>
<a href="#">Multiple choice</a></li>
</ul>
</li><li>
<a href="#">Read</a></li><li>
<a href="#">Contact</a></li><li>
<a href="#">About Us</a></li>
</ul>
</div>
</div>
1CSS 的形状 - https://css-tricks.com/examples/ShapesOfCSS/
【解决方案2】：
因为您已将下拉菜单集成到标题中，所以如果您只是使其可见，它可能会调整标题的大小。
一个简单的解决方案是添加如下内容：
ul li ul{
position: absolute;
top: 58px;
}
通过使这个元素成为绝对元素，我们将其从标头代码中“分解”出来。
注意：这可能不是完美的代码，但它可能会给你一个方向。
【解决方案3】：
你的 ul 是绝对定位的，所以它隐含在顶部：0px，
只需将此设置为 5px 以补偿边框大小
#nav ul ul {
top: 5px; /* added */
}
#nav {
background-color: #e26a63;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
border: 5px solid transparent;
}
#nav ul li:hover {
background-color: #cb5f59;
border-bottom: 5px solid #9e4a45;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
<div id="nav">
<div id="wrap">
<ul>
<li><a href="#">Home</a></li><li>
<a href="#">Study</a></li><li>
<a href="#">Games</a>
<ul>
<li><a href="#">Riddles</a></li><li>
<a href="#">Flip card game</a></li><li>
<a href="#">Spot the mistake</a></li><li>
<a href="#">Multiple choice</a></li>
</ul>
</li><li>
<a href="#">Read</a></li><li>
<a href="#">Contact</a></li><li>
<a href="#">About Us</a></li>
</ul>
</div>
</div>
【解决方案4】：
您可以将边框更改为 box-shadow 并且盒子阴影不会从盒子模型中占据
#nav ul li:hover {
background-color: #cb5f59;
box-shadow: 0 -2.2px 0 #9e4a45 inset,0 0 0 #9e4a45;
}