JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="Navigation">
    <li><a href="?USER=name"><img src="../../name.jpg?format=raw" title="full name - skypename" alt="Klick me!"></a>
      <ul>
        <li><a href="callto://skypename">Call</a></li>
        <li><a href="mailto://skypename">Chat</a></li>
      </ul>
    </li>
  </ul>

CSS

/*für eine liste mit id Navigation*/ 
ul#Navigation {
    text-align: center;
  }

/*für die Listenpunkte der Liste mit id=Navigation*/
  ul#Navigation li {
    list-style: none;
    float: left;
    position: relative;
    margin: 0.4em; padding: 0;
  }

/*für die Unterliste*/

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.7em; left: -0.4em;
  }

/*für einen Unterpunkt der Unterliste*/
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
  }

/*Für einen Link der Liste mit id="Navigation"*/
  ul#Navigation a {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    color: maroon; background-color: #ccc;
  }



/*für alle Links*/
  ul#Navigation a:hover, li a  {
    border-color: white;
    color: white; background-color: gray;
  }


/* dynamischen Ein-/Ausblendung */
  ul#Navigation li>ul {
    display: none; top: 1.6em;
  }

  ul#Navigation li:hover>ul {
    display: block;
  }