Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1><a href="http://stackoverflow.com/questions/17636371/">Javascript 
           styling if specific content is present or hovered</a>            
    </h1>
    <h3>Made by using Plnkr.co!</h3>
    <div>
       The main navigation should do the following
       <ol>
         <li>on hover change background color and show matching sub-navigation</li>
         <li>on mouseout keep background color of main navigation and show subnavigation</li>
         <li>unless another main navigation is hovered then drop background-color and start at 1 for new main nav</li>
       </ol>
      
    </div>
    <h2>Demo</h2>
    <ul id="mainNav">
    <li id="Home" class="mainNav Home" onmouseover="navHover('Home')"><a href="#">Home</a></li>
    <li id="Portfolio" class="mainNav Portfolio" onmouseover="navHover('Portfolio')"><a href="#">Portfolio</a></li>
    <li id="Tutorials" class="mainNav Tutorials" onmouseover="navHover('Tutorials')"><a href="#">Tutorials</a></li>    
    <ul id="mainNav_Drop">
            <li class='mainNav_Drop_Home'><a href='#'></a></li>
    </ul>
</ul>
<script>

function setSubNav(navClass, navItems)
{
    var elNavDrop=document.getElementById('mainNav_Drop'); // renamed since this returns an element not only an id
    var subNavList ="";
    // .forEach requires a shim --> http://stackoverflow.com/questions/9329446/for-each-in-an-array-how-to-do-that-in-javascript
    navItems.forEach(function(navItem) {
        subNavList += "<li class='" + navClass +"'><a href='#'>" + navItem +"</a></li>";
    }); 
    elNavDrop.innerHTML =subNavList; 
    return;
};

function removeHoverState(mainNavId, classToRemove){
  // console.log("mainNavId = " + mainNavId);
  // remove class  --> http://stackoverflow.com/questions/2155737/
  document.getElementById(mainNavId).className =
    document.getElementById(mainNavId).className.replace('wasHovered','');
  
};

function navHover(cls){
    
    // remove the hover class from all entries
    var mainNavIds = ["Home", "Portfolio", "Tutorials"];    
    mainNavIds.forEach(function(mainNavId){
          removeHoverState(mainNavId, "wasHovered")});
    
    var elMainNav = document.getElementById(cls);    
    if(elMainNav.className.indexOf("wasHovered") == -1) { elMainNav.className += " wasHovered";};
    switch(cls){
        case("Home"):            
            setSubNav('mainNav_Drop_Home', ["Home"]);
            break;
        case("Portfolio"):
            var naItemsPortfolio = ["Qualifications", "Services", "Portfolio", "Case Studies"];
            setSubNav('mainNav_Drop_Portfolio', naItemsPortfolio);            
            break;
        case("Tutorials"):
            var naItemsTutorials = ["HTML5", "CSS3", "WordPress", "Design"];
            setSubNav('mainNav_Drop_Tutorials', naItemsTutorials);              
            break;
        default:
            elNavDrop.innerHTML="<li><a href='#'></a></li>"
        }
};// end of  navHover

   </script> 
  </body>

</html>

// Code goes here

/* Styles go here */

.wasHovered { background-color: orange}

li.mainNav:hover {background-color: orange}