title: Solution to fully show tooltip on scrollable menubar
body: <p><a href="https://i.stack.imgur.com/W7s2Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W7s2Q.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to make a dropdown menu bar and if I hover on an Item tooltip will show some text.</p>
  
  <p>I am getting result A and I was hoping for a result like B where the tooltip is NOT half covered up by the dropdown menu.</p>
  
  <p>I am assuming that since I have my span element is inside the anchor element,it is not possible for it to pop out of the dropdown menu or maybe
  it's due to the overflow attribute but I'm not really sure how to fix or alter my code in order to achieve B, also I would not want to increase the width of the dropdown menu to achieve this,that is to say I don't want the tooltip text is restricted by the dropdown menu.</p>
  
  <p>Is there a direction I can head to achieve what I am asking??</p>
  
  <p>code is below : </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id='menu'&gt;
  &lt;li&gt;choose
      &lt;ul&gt;
        &lt;li&gt;&lt;a class="tooltip" href=""&gt;a&lt;span class="tooltiptext"&gt;this is a&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="tooltip" href=""&gt;b&lt;span class="tooltiptext"&gt;this is b&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="tooltip" href=""&gt;c&lt;span class="tooltiptext"&gt;this is c&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="tooltip" href=""&gt;d&lt;span class="tooltiptext"&gt;this is d&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>#menu &gt; li {
      display:inline-block;
      border:1px solid grey;
      position:relative;
  }
  #menu li ul {
      position:absolute;
      border:1px solid grey;
      list-style-type: none;
      max-height:0;
      overflow:hidden;
  }
  #menu li:hover ul {
      overflow-y:scroll;
      overflow-x:hidden;
      max-height:150px;
  }
  .tooltip {
      position: relative;
      display: inline-block;
  }
  .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      padding: 5px 0;
      border-radius: 6px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
  }
  .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
  }
  </code></pre>