I am currently facing an issue with my css navigation bar. The problem arises when I hover over a menu item that has a submenu (such as "Lifestyle"), causing the separators to extend beyond the link background area and look unattractive. Is there a way to only remove these separators during hover and active states?
Below is the css code I am using:
#mainnav {
width: auto;
height: 100px;
padding-top: 26px;
float: right;
right:0;
z-index:100;
}
#mainnav ul,
#mainnav li,
#mainnav span,
#mainnav a {
position: relative;
margin: 0;
padding: 0;
}
#mainnav ul{
list-style-type:none;
}
#mainnav ul li:hover {
background-color: #AEB67F;
}
#mainnav ul li a {
padding: 50px 12px 57px 12px;
text-align: center;
}
#mainnav ul li a:hover, #mainnav ul li a.active {
background-color: #AEB67F;
padding: 50px 12px 57px 12px;
}
#mainnav > ul > li {
float: right;
}
#mainnav ul:after {
content: ""; clear: both; display: block;
}
#mainnav ul li {
border-left:solid 1px #B4BC84;
}
#mainnav ul li:last-child {
border:none;
}
#mainnav ul ul li + li:after {
content: "";
clear:both;
}
#mainnav ul ul {
display: none;
}
#mainnav ul li:hover > ul {
display: block;
}
#mainnav ul ul {
background: rgb(174,182,127);
opacity: 0.9;
border-radius: 0px;
position: absolute;
top: 74px;
width:170px;
}
#mainnav ul ul li {
float: none;
border-top: none;
position: relative;
padding: 8px 12px 8px 0;
border-bottom: 1px dotted #94A062;
border-top: none;
}
#mainnav ul ul li a {
color: #fff;
text-decoration:none;
text-align:left;
padding: 8px 30px 8px 12px;
}
#mainnav ul ul li:last-child a {
border-bottom: none;
}
#mainnav ul ul li a:hover {
background: rgb(48,50,40);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 8px 30px 8px 18px;
}
#mainnav ul ul li:hover {
background: rgb(48,50,40);
padding: 8px 0;
border: none;
}
If you would like to see the issue firsthand, here is a link to the website I am working on:
Your assistance in resolving this matter would be greatly appreciated! Thank you in advance!