How do I hide the dividers in my navigation on hover? - html

Question

I'm trying to make the grey borders on the left and right of the main navigation items go away when I hover over them, like maybe be covered by the hover effect, right now they in their own list item, is there a easy way to do this? Thanks!
This is my CSS..
.divider {
background-color: #a8a8a8;
background-repeat: no-repeat;
height: 15px;
top: 15px;
width: 1px;
}
#cssmainmenu,
#cssmainmenu > ul {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #333333;
height: 29px;
}
#cssmainmenu:after,
#cssmainmenu > ul:after {
clear: both;
}
#cssmainmenu > ul {
margin: 0;
padding: 0;
position: relative;
}
#cssmainmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmainmenu > ul > li {
float: left;
position: relative;
}
#cssmainmenu > ul > li > a {
padding: 8px 10px 8px;
display: block;
color: #4a4a4a;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
border-top: 5px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
}
#cssmainmenu > ul > li.has-sub:hover > a {
background-color: #f5f5f5;
border-color: #70bf47 #cccccc transparent;
border-width: 5px 1px 1px;
}
#cssmainmenu > ul > li:hover > a {
background-color: #f5f5f5;
border-color: #70bf47 #cccccc #cccccc;
border-width: 5px 1px 1px;
}
/* Childs */
#cssmainmenu > ul ul {
opacity: 0;
font-weight: 400;
background-color: #f5f5f5;
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
z-index: -1;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#cssmainmenu > ul li:hover ul {
opacity: 0.950;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
left: 0;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.2);
}
#cssmainmenu > ul ul:before {
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmainmenu > ul ul li a {
padding: 12px 12px;
display: block;
color: #4a4a4a;
font-size: 13px;
text-decoration: none;
width: 150px;
border-top: 1px solid #e9e9e9;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1); -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#cssmainmenu > ul ul li a:hover {
background-color: #eaeaea;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
#cssmainmenu > ul ul li.last a:hover {
background-color: #eaeaea;
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
box-shadow: inset 1px 1px 0px 0px rgba(255,255,255,1);
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
My HTML
<div id='cssmainmenu'>
<ul>
<li class='active'><a href='salestool.aspx'><span>Get Started</span></a></li>
<li class='divider'></li>
<li class='has-sub'><a href='learn.aspx'><span>How it Works</span></a>
<li class='divider'></li>
<ul>z
<li><a href='learn2.aspx'><span>How it works</span></a></li>
<li><a href='learn3.aspx'><span>How you save</span></a></li>
<li><a href='utilities2.aspx'><span>Why CEC</span></a></li>
<li><a href='finance.aspx'><span>Financing</span></a></li>
<li><a href='referral.aspx'><span>SolarPerks</span></a></li>
<li><a href='learn5.aspx'><span>RemoteMeter</span></a></li>
<li><a href='utilities.aspx'><span>Utilites</span></a></li>
<li class='last'><a href='faq.aspx'><span>FAQ</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='aboutUS.aspx'><span>About CEC</span></a>
<li class='divider'></li>
<ul>
<li><a href='aboutUS.aspx'><span>About CEC</span></a></li>
<li><a href='mission.aspx'><span>Our Mission</span></a></li>
<li><a href='communitysolarprojects.aspx'><span>The Projects</span></a></li>
<li><a href='Testimonials.aspx'><span>Community</span></a></li>
<li><a href='cecteam.aspx'><span>CEC Team</span></a></li>
<li><a href='supporters.aspx'><span>Supporters</span></a></li>
<li><a href='jobs.aspx'><span>Careers</span></a></li>
<li class='last'><a href='news.aspx'><span>News/Press</span></a></li>
</ul>
</li>
<li class='divider'></li>
<li><a href='https://www.myowncleanenergy.com/'><span>My Clean Energy</span></a></li>
<li class='divider'></li>
<li class='last'><a href='contact.aspx'><span>Contact Us</span></a></li>
</ul>
</div>

Answer 1

add this to your css:
#cssmainmenu > ul li:hover + li.divider{display:none}
but it's better to change the color of the line:
#cssmainmenu > ul li:hover + li.divider{background-color:transparent;}
Luiggi