JSFiddle - React, Tailwind, and code Playground

by reporter

HTML

<div id="menu">
<ul>
    <li style='background-color:#99C'><a href='#' onMouseOver="coloringLinks('submenu-3', '#99C')" onMouseOut="coloringLinks('submenu-3', 'white')">Link_01 </a></li>
    <li style='background-color:#FFC'><a href='#' onMouseOver="coloringLinks('submenu-4', '#FFC')" onMouseOut="coloringLinks('submenu-4', 'white')">Link_02 </a></li>
    <li style='background-color:#0CC'><a href='#' onMouseOver="coloringLinks('submenu-3', '#0CC')" onMouseOut="coloringLinks('submenu-3', 'white')">Link_03 </a></li>
    <li style='background-color:#C69'><a href='#' onMouseOver="coloringLinks('submenu-4', '#C69')" onMouseOut="coloringLinks('submenu-4', 'white')">Link_04 </a></li>
</ul>
</div>



<div id="submenu-3">
        <ul>
                <li><a href="#" id="l-3a">Sublink_3a</a></li>
                <li><a href="#" id="l-3b">Sublink_3b</a></li>
                <li><a href="#" id="l-3c">Sublink_3c</a></li>
                <li><a href="#" id="l-3d">Sublink_3d</a></li>
                <li><a href="#" id="l-3e">Sublink_3e</a></li>
                <li><a href="#" id="l-3f">Sublink_3f</a></li>
                <li><a href="#" id="l-3g">Sublink_3g</a></li>
                <li><a href="#" id="l-3h">Sublink_3h</a></li>
        </ul>

         <p>lorem ipsum<a href="#">ein anderer Link</a>text text</p>
</div>

<div id="submenu-4">
        <ul>
                <li><a href="#" id="l-4a">Sublink_4a</a></li>
                <li><a href="#" id="l-4b">Sublink_4b</a></li>
                <li><a href="#" id="l-4c">Sublink_4c</a></li>
                <li><a href="#" id="l-4d">Sublink_4d</a></li>
                <li><a href="#" id="l-4e">Sublink_4e</a></li>
                <li><a href="#" id="l-4f">Sublink_4f</a></li>
                <li><a href="#" id="l-4g">Sublink_4g</a></li>
                <li><a href="#" id="l-4h">Sublink_4h</a></li>
        </ul>

         <p>lorem ipsum<a href="#">ein anderer Link</a>text text</p>
</div>

CSS

#menu   {
    display: inline;
    text-align: center;
    text-transform: uppercase;
    }
#menu li {
    list-style: none;
    display: inline;
    }
#menu a {
    margin-right:  0.2em;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid black;
    }
#submenu-1,
#submenu-2,
#submenu-3,
#submenu-4  {
    float: left;
    width: 300px;
    border: 1px solid;
    }
#submenu-1 li,
#submenu-2 li,
#submenu-3 li,
#submenu-4 li  {
    list-style: none;
    line-height: 2.5em;
    }
#submenu-1 a,
#submenu-2 a,
#submenu-3 a,
#submenu-4 a {
    margin-right:  0.2em;
    padding: 0.2em 0.5em;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid black;
    }

JavaScript

function coloringLinks(nameSubMenu, targetColor)
{
  var targetMenu = document.getElementById(nameSubMenu);
  var alle_links = targetMenu.getElementsByTagName('ul')[0].getElementsByTagName('a');
  var alle_links_length = alle_links.length;

  if (typeof alle_links_length == "number")
  {
    for (var i = 0; i < alle_links_length; ++i)
	{
      var link = alle_links[i];
      link.style.backgroundColor = targetColor;
     }
   }
 }