Sanjeev K Sanjeev K - 5 days ago 6
CSS Question

Main navigation active when submenu opened CSS

I am trying to make the main menu active (background color same sub menu background color), so the when submenu is opened the main menu color becomes active, I tried to make it but not working, Can anyone please look in to it whats wrong with my css?

JSfiddle demo



nav {
float: left;
width: 100%;
background: #6c9d1c;
border-bottom: 5px solid #e57817;
font-family: 'MyriadPro-Regular';
}
nav > ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
text-align: center;
}
nav > ul > li {
list-style: none;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
nav > ul > li > a {
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
padding: 7px 17px 3px 17px;
font-weight: 700;
display: block;
line-height: normal;
}
nav > ul > li > a:hover {
background-color: #e57817;
color: #fff;
text-decoration: none;
}
nav > ul > li > ul {
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
top: 30px;
width: 100%;
text-align: left;
}
nav > ul > li:hover ul {
display: block;
}
/*main menu active on submenu open*/
nav > ul > li > ul > li > a:hover nav > ul > li > a:hover {
background-color: #e57817;
}
/*Submenu*/
nav > ul > li > ul > li {
padding: 0;
margin: 0;
list-style: none;
display: block;
}
nav > ul > li > ul > li > a {
display: block;
background: #e57817;
color: #fff;
font-size: 14px;
font-family: Arial;
border-bottom: 1px solid #fcb65a;
padding: 8px 20px;
}
nav > ul > li > ul > li > a:hover {
background-color: #fcb65a;
color: #fff;
text-decoration: none;
}

<nav>
<ul>
<li><a href="corporate-training/">Main Menu</a>
<ul>
<li><a href="corporate-training/">Submenu one</a></li>
<li><a href="soft-skills-training/">Sub Menu Two</a></li>
</ul>
</li>
</ul>
</nav>




Answer

You are using the :hover selector on <a> which means that when the cursor is moved over the <ul> the text in <a> is no longer hovered. The <ul> is still part of its parent <li> though so change:

nav > ul > li > a:hover {

to

nav > ul > li:hover {

Here's an updated fiddle: https://jsfiddle.net/nc5yqah9/2/

Comments