SO - 35694477

by Arun P Johny

HTML

<header>
  <!-- <ul>   <li><a></a><ul>   <li><a></a></li>   -->
  <!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
  <nav id="dd-menu-container">
    <ul id="dd-menu">
      <li id="dd-menu-tab1" class="dd-menu-tab">
        <a href="link1.htm" class="dd-menu-tab-anchor" title="Link1">Link 1</a>
        <ul id="dd-submenu1" class="dd-submenu">
          <li id="dd-submenu1-tab1" class="dd-submenu-tab">
            <a href="link2" id="dd-menu-tab-anchor" class="">SubLink1a</a></li>
          <li id="dd-submenu1-tab2" class="dd-submenu-tab">
            <a href="" id="" class="">Sublink1b</a></li>
        </ul>
      </li>
      <li id="dd-menu-tab2" class="dd-menu-tab">
        <a href="link2.htm" id="link2" class="dd-menu-tab-anchor" title="link2">Link2</a>
        <ul id="dd-submenu2" class="dd-submenu">
          <li id="dd-submenu2-tab1" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublimn2a</a></li>
          <li id="dd-submenu2-tab2" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2b</a></li>
          <li id="dd-submenu2-tab3" class="dd-submenu-tab">
            <a href="#" id="#" class="dd-submenu-tab-anchor">Sublink2c</a></li>
        </ul>
      </li>

  </nav>

</header>
<div>
  <h1 id="site title">Website.com</h1>
</div>

<body>
  <p>First paragraph sample text</p>
  <p>Second paragraph sample text</p>
  <p>Third paragraph sample text</p>


</body>
<footer>
  <p>
    References
  </p>
</footer>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

nav {
  display: block;
  padding: 0px;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  background-color: beige;
}

.dd-menu-tab-anchor {
  display: inline-block;
  color: white;
}

.dd-menu {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.dd-menu-tab {
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: auto;
  padding-right: auto;
  width: 9%;
  text-align: center;
}

.dd-submenu {
  display: none;
}

.dd-submenu-onmouseover {
  display: block;
}

li {
  list-style-type: none;
  background-color: #3300FF;
  border: 2px;
  border-color: white;
}

a {
  text-align: center;
}

JavaScript

getTabs = function(elementClass) {
  var tabs = document.getElementsByClassName(elementClass);
  console.log(tabs);
  return tabs
};
getSubmenus = function(elementClass) {
  var submenus = document.getElementsByClassName(elementClass);
  console.log(submenus);
  return submenus;
};

window.onload = function() {
  var tabs = getTabs("dd-menu-tab");
  var submenus = getSubmenus("dd-submenu");
  var tabNumber = tabs.length - 1;
  var currentTab = 0;
  [].forEach.call(tabs, function(el, idx) {
    var submenu = submenus[idx];
    el.addEventListener('mouseenter', function() {
      submenu.className = "dd-submenu-onmouseover"
    });
    el.addEventListener('mouseleave', function() {
      submenu.className = "dd-submenu"
    });
  })
};