我有两个div互相覆盖。我只想从覆盖区域删除边框。请看下面的示例代码
<div style="width:100px; height:20px; background-color:#5475b1;border: 2px solid;"></div>
<div style="width:150px; height:200px; background-color: #5475b1;border: 2px solid;"></div>
此代码将输出为：
但我希望输出为：
我怎样才能做到这一点呢？请帮帮忙。
注意：我正在使用下拉菜单。第一个div实际上用于菜单名称，第二个div用于菜单列表。
这有几种方法。但基本机械师是相似的。一种方法是：
请参阅（快速和肮脏的）代码注释示例：
null
nav div {
background-color: yellow;
padding: 20px;
}
.tab {
position: relative;
width: 100px;
margin-left: 50px;
text-align: center;
/* no border bottom */
border-top: 4px solid red;
border-right: 4px solid red;
border-left: 4px solid red;
/* tab to foreground*/
z-index: 10;
}
.menu {
width: 300px;
/* border all arround */
border: 4px solid red;
/* element in background */
z-index: 9;
/* move menu up = slid under tab */
position: relative;
top: -4px;
}<nav>
<div class="tab">Menutab</div>
<div class="menu">
Menuitem<br>
Menuitem<br>
Menuitem<br>
Menuitem<br>
Menuitem<br>
...
</div>
</nav>
检查此代码：
null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#divTop {
height:20px;
width:100px;
background: #5475b1;
border: solid black;
border-width: 2px 2px 0;
position: relative;
transform: translateY(3px);
}
#divBottom {
height:200px;
width:150px;
background: #5475b1;
clear: both;
border: 2px solid black;
}
</style>
</head>
<body>
<div id ="divTop" ></div>
<div id ="divBottom" ></div>
</body>
</html>