CSS border wrap submenu and parent tab. - css

Question

I have a CSS menu with submenu. At the top level, there is a border for top, left, and right. For the submenu, there is a border on all 4 sides. See the JSFiddle at https://jsfiddle.net/vjy8adff/.
I want to move the submenu up by 1px to create an effect that there is only one loop around the parent tab and submenu. Since my submenu is now "absolute" positioned, I can't do the following:
ul ul{
top: -1px;
}
What is the best solution here.

Answer 1

At line 17 add :
margin-top: -1px;
Full code :
ul.menu > li > ul {
width: auto;
margin-top: -1px;
display: none;
position: absolute;
white-space: nowrap;
background-color: #fff;
padding: 10px;
border-radius: 2px;
}

Answer 2

if you set top to -1px the element will calculate the top right from the top i have set the top to 100% which will bring the element down to 100% and removed 1px from it which is the border
top:calc(100% - 1px);
so that it takes the element to 100% below and exclude 1px border
you can also use #ianis solution where the element is moved 1px top with -ve margin it acts like position:relative with -ve top value
ul.no-style {
list-style: none;
margin: 0;
padding: 0;
}
ul.no-style li {
padding: 0;
}
ul.list-inline > li {
display: inline-block;
}
/* basic menu structure */
ul.menu > li {
padding-right: 15px;
position: relative;
width: 50px;
}
ul.menu > li > ul {
width: auto;
display: none;
position: absolute;
white-space: nowrap;
background-color: #fff;
padding: 10px;
margin-top: -1px;
border-radius: 2px;
}
ul.menu > li > div.multi-2col {
display: none;
position: absolute;
width: 180px;
white-space: nowrap;
background-color: #fff;
border: solid #eee 1px;
border-radius: 2px;
}
ul.menu > li > div.multi-2col div.multi-2a {
padding-right: 15px;
}
ul.menu > li > div.multi-2col div.multi-2a,
ul.menu > li > div.multi-2col div.multi-2b {
padding: 10px;
width: auto;
float: left;
}
ul.menu > li > div.multi-2col.right {
right: 0;
}
ul.menu > li > div.multi-2col.right .multi-2a {
padding-left: 15px;
}
ul.menu > li > div.multi-2col.right .multi-2a,
ul.menu > li > div.multi-2col.right .multi-2b {
width: auto;
float: right;
}
ul.menu > li:last-child {
padding-right: 0px;
}
ul.menu > li:hover ul,
ul.menu > li:hover div.multi-2col {
display: block;
}
/* border wrap submenu and parent */
ul.menu.border-wrap > li {
padding: 0px;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
ul.menu.border-wrap > li > a {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
display: block;
background-color: #eee;
}
ul.menu.border-wrap > li:hover {
background-color: #eee;
border-top: solid red 1px;
border-left: solid red 1px;
border-right: solid red 1px;
}
ul.menu.border-wrap > li:hover a {
z-index: 5;
}
ul.menu.border-wrap > li:hover > ul,
ul.menu.border-wrap > li:hover > div.multi-2col {
background-color: #eee;
border: solid red 1px;
left: -1px;
z-index: 2;
}
<ul class="no-style list-inline menu border-wrap">
<li>
Home
<ul class="no-style">
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
</ul>