Pure CSS Drop Down Menu - Unable to Keep Top <Li> Highlighted When Hovering Over Sub-Menu

PURE CSS DROP DOWN MENU - Unable to keep top li highlighted when hovering over sub-menu

Change #nav > li a:hover to #nav > li:hover a in your CSS.

Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.

CSS Parent menu stay on highlighted when mouse hover to sub menu

As explained in my comment - .dropdown should still be "highlighted" on :hover, because .dropdown-menu is nested inside it and therefore you are still hovering over .dropdown.

/* Assuming you are making nested lists display:none */
ul{
    list-style: none;
}
.dropdown-menu{
    display: none;
}
.dropdown:hover{
    background: yellow;
}
.dropdown:hover .dropdown-menu {
    display: block;
    left:220px;
    top:0;
}

DEMO HERE

CSS Menu - Keep parent hovered while focus on submenu

You hould be able to change this

.primary-navigation ul li a:hover { 
    background: #f39cbd;
}

to this

.primary-navigation ul li:hover a { 
    background: #f39cbd;
}

This way the color of your main nav item is changed when you hover over the parent li. Since the submenu should also be inside this li, the hover will still be triggered when moving over the submenu, an so the color of the link should also keep it's hover state.

Keeping the drop down menu top item highlighted while scrolling

Why, with this selector, of course!

#menu li:hover > a {
 background-color: rgb(216,216,216);
}

View it on JSFiddle

Pure CSS - How to keep menu button animation ON, while the dropdown menu is opened

Try

.dropdown-menu-hook:hover > .line-anim:after {
    width: 100%;
}

It's not a good idea, to show menus only on hover. You could get some problems on touch devices, so active menus or some with js-toggled classes are a good choice.

Sub-menu displays content on hover over of main menu element

You use child combinator > to select the immediate children of the element.

nav > ul ul{  display: none;}
nav > ul li:hover > ul{  display: block;}

<header><H2>My Web Page</H2></header><body><div class="wrapper">    <nav>      <ul>        <li>Music          <ul>          <li>Songs            <ul>              <li>Blue side parks</li>              <li>Albums</li>            </ul>          </li>                    </ul>        </li>      </ul>    </nav></div></body></html>

Unable to select (click) Sub-menu item

Because there is a hidden Gap in your main menu and sub menu. By inspecting your css with firebug, you have something like this in your css :

#access ul ul {
    background: none repeat scroll 0 0 rgba(143, 235, 251, 0.9);
    display: none;
    left: 0;
    padding: 10px;
    position: absolute;
    top: 24px;
    vertical-align: middle;
    width: 160px;
    z-index: 10;
}

Now top:24px; is too far from main menu. Change it to -

#access ul ul {
    background: none repeat scroll 0 0 rgba(143, 235, 251, 0.9);
    display: none;
    left: 0;
    padding: 10px;
    position: absolute;
    top: 20px;
    vertical-align: middle;
    width: 160px;
    z-index: 10;
}

And now you can select you sub menu.

Trouble with sub-menu and overlapping body element

You have to set the z-index of the .header-row element. Because it is positioned relative and so it's z-index is the one that counts.

This is the header-row now:

.header-row {
    position: relative;
    z-index: 2;
}

change it to:

.header-row {
    position: relative;
    z-index: 2000;
}

you could also set the .header-row to position:static and then change the z-index of the #main-navelement:

.header-row {
    position: static;
    z-index: 2;
}

#main-nav {
    border: none;
    border-radius: 0;
    position: relative;
    z-index: 2000;
    width: 100%;
}

Edit: As there is some confusion I want to add a bit more to this answer:

The navigation is in front of the content because there is no z-index set for the <div id="content">and it's children. So any element with a z-index defined will be in front of the content.

As the header-row has a z-index of 2 - the nav is in front of the content.

The problem is that the testimonial-slides have a dynamic set z-index between 90 and 100. As they have no parent with a defined z-index and relative position this z-index will be matched against the .header-row's z-index which is only 2.

One more alternative to solve the problem would be to set the z-index of <div id="content"> to 1.

Pure CSS Drop Down Menu - Unable to Keep Top <Li> Highlighted When Hovering Over Sub-Menu