CSS on hover remove under/border-bottom - css

Question

im wondering how to write my css so that when i hover the text the green line under the yellow box becomes yellow as well. thank you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
link
https://jsfiddle.net/18fk9sce/
i should add that i wish the green line to remain. some solutions seem to remove the green line running across the page.

Answer 1

Okay, I've just updated the solution now.
Just replace the overflow: hidden; in ul with a fixed height: 42px. And increase the padding bottom of the hovered link by 2px (i.e the border-bottom size). That would cover the border with yellow color of the link.
Check the updated fiddle
ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 42px;
border-bottom: 2px solid green;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
padding-bottom: 14px;
}

Answer 2

HTML - added wrapper
<div class="menu__holder">
<ul class="main_menu_left">
<li id="left">Homehome</li>
<li id="left">Homehomehome</li>
<li id="left">Homehome</li>
<li id="right">Homehome</li>
<li id="right">Home</li>
</ul>
</div>
CSS
.menu__holder {
width: 100%;
padding: 0;
border-bottom: 2px solid green;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 9999;
margin-bottom: -2px;
}
ul li {
border-bottom: 2px solid transparent;
}
ul li:hover {
border-color: yellow;
z-index: 9999;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
a:hover {
background-color: yellow;
}
Updated fiddle - NEW

Answer 3

You have to set the border in the li not in ul, so you can separately change the border.
Just change the Style to achieve it:
Updated fiddle
Updated Style
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
}
li{
border-bottom: 2px solid green;
}
li:hover {
background-color: yellow;
border-bottom: none;//you can set other color here
}

Answer 4

Updated CSS :-
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}
a {
display: block;
color: black;
text-align: center;
padding: 12px 12px;
text-decoration: none;
border-bottom: 2px solid green;
}
a:hover {
background-color: yellow;
border-bottom: 2px solid yellow;
}

Answer 5

try with adding this to your css.if this is not the case tell me
ul:hover{
border-bottom:1px solid yellow;
}

Answer 6

thanks to everyone who contributed to this question.
in the end this is the code i use.
https://jsfiddle.net/4d0ghscu/
<style>
.menu{
height:40px;
border-bottom:4px solid green;
padding:0;}
.menu_left{
display:inline;
list-style-type:none;}
.menu_right{
display:inline;
list-style-type:none;}
.tab_left{
float:left;}
.tab_right{
float:right;}
a{
display:block;
color:black;
padding:12px 12px;
text-decoration:none;}
a:hover{
background-color:yellow;}
</style>
<ul class="menu">
<ul class="menu_left">
<li class="tab_left">Homehome</li>
<li class="tab_left">Homehomehome</li>
<li class="tab_left">Homehome</li>
</ul>
<ul class="menu_right">
<li class="tab_right">Homehome</li>
<li class="tab_right">Home</li>
</ul>
</ul>
key to the code:
*separating left from right within an overhead. which made it simpler and more flexible to add new elements to the navigation menu.
*adding height.