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>
    <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>    
      <li id="Contact" class="mainNav Contact" onmouseover="navHover('Contact')"><a href="#">Contact</a></li>
      <li>  
          <ul id="mainNav_Drop">
            <li class="subNav "><a href='#'></a></li>
          </ul>
      </li>
    </ul>
  
  </body>

</html>

// Code goes here

function setHoverStyle(mainNavId, mainNavIds) { 
   console.log('mainNavIds: ' + mainNavIds);
   for (i = 0; i < mainNavIds.length; ++i)
   {
      document.getElementById(mainNavIds[i]).className = document.getElementById(mainNavIds[i]).className.replace('duck','');
   }
   document.getElementById(mainNavId).className += " duck";
};

function setSubNav(navClass, subNavigationItems)
{
    var elSubNav =document.getElementById('mainNav_Drop'); // renamed since this returns an element not only an id
    var subNavList ="";
  for (i = 0; i < subNavigationItems.length; ++i)
	{
   		subNavList += "<li class='" + navClass +"'><a href='#'>" + subNavigationItems[i] +"</a></li>";      	
	}
    elSubNav.innerHTML =subNavList; 
    return;
};

function navHover(id){

	// 1. setHoverStyle 
	//		--> remove class duck from all main-navs
    // 		--> add class duck to this main-nav
    // 2. load sub nav of this main-nav 
	var mainNavIds = ['Home', 'Portfolio', 'Tutorials', 'Contact'];
	var subNavigation = {};
	subNavigation['Home'] = ['Home'];
	subNavigation['Portfolio'] = ["Qualifications", "Services", "Portfolio", "Case Studies"];
	subNavigation['Tutorials'] = ["HTML5", "CSS3", "WordPress", "Design"];
	subNavigation['Contact'] = ['Contact'];
    setHoverStyle(id, mainNavIds);
    setSubNav(id, subNavigation[id]);
};

/* Styles go here */

.duck { background-color: orange}

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