Links in CSS Toolstips

I've got the following problem I can't wrap my head around: For an image I created a pseudo image map via CSS to have styled tooltips which works as follows:

#map {
             margin:0;
             padding:0;
             width:800px;
             height:838px;
background:url(http://prntscr.com/q4nl0i) 
top left no-repeat #fff;
             font-family:"Segoe UI", arial, helvetica, sans-serif;
             font-size:10pt;
         }

         #map li {
             margin:0;
             padding:0;
             list-style:none;
         }

         #map li a {
             position:absolute;
             display:block;
                background:url(https://prnt.sc/q4no1g);
                text-decoration:none;
             color:#fff;
         }

         #map li a span { display:none; }

         #map li a:hover span {
             position:relative;
             display:block;
             width:200px;
             left:10px;
             top:-20px;
             border:1px solid #ea7d30;
             background:#323232;
             padding:5px;
              filter:alpha(opacity=80);
             opacity:0.8;
           }

         #map li a:hover span b {
             color: #ea7d30;
           }

         #map a.gsa {
             top:84px;
             left:19px;
             width:128px;
             height:67px;
         }

<html>
<head>


</head>

<body class="main">
<ul id="map">
     <li><a class="gsa" href="#"><span><b>GSA</b><br>
         F&uuml;gen Sie die GSA-Nummer aus der MRL per Drag &amp; Drop ein.
         </span></a></li>


</ul>
</body>

Now I would like to insert a link into this tooltip (for the term "GSA-Nummer"). Nested links are not allowed, that is clear. Does anyone have an idea how I could accomplish this (preferably CSS/HTML only)?

Solution

You can't use a link inside of another link. Change the anchor tag to a different type. In my snippet i used span

#map {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 838px;
  background: url(http://prntscr.com/q4nl0i) top left no-repeat #fff;
  font-family: "Segoe UI", arial, helvetica, sans-serif;
  font-size: 10pt;
}

#map li {
  margin: 0;
  padding: 0;
  list-style: none;
  height:100px;
}

#map li span {
  position: absolute;
  display: block;
  background: url(https://prnt.sc/q4no1g);
  text-decoration: none;
  color: #fff;
}

#map li span span {
  display: none;
}

#map li span:hover span {
  position: relative;
  display: block;
  width: 200px;
  left: 10px;
  top: -20px;
  border: 1px solid #ea7d30;
  background: #323232;
  padding: 5px;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

#map li span:hover span b {
  color: #ea7d30;
}

#map span.gsa {
  top: 84px;
  left: 19px;
  width: 128px;
  height: 67px;
}

<body class="main">
  <ul id="map">
    <li><span class="gsa" href="#"><span><b>GSA</b><br>
    F&uuml;gen Sie die <a href="#">GSA-Nummer</a> aus der MRL per Drag &amp; Drop ein.
        </span></span></li>


  </ul>
</body>