JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
  <ul calss="main_ul">
    <li><a href="#">Home</a>
      <ul>
        <li><a href="javascript:window.open('','_self').close();">Log In</a></li>
        <li><a class="logOut" href="#">Log Out</a></li>
      </ul>
    </li>
    <li class="masters"><a href="#">Masters</a></li>
    <li class="css"><a href="#">CSS</a></li>
    <li class="jscript"><a href="#">Javascript</a></li>
    <li class="jquery"><a href="#">jQuery</a></li>
  </ul>
</div>
<br>
<br>
<select class="filledField" style="width:300px;">
  <option>001;aynText;http://stackoverflow.com/</option>
  <option>002;anyText;http://stackoverflow.com</option>
  <option>002;anyText;http://stackoverflow.com</option>
  <option>001;anyText;http://stackoverflow.com</option>
  <option>001;anyText;http://stackoverflow.com</option>
  <option>003;anyText;http://stackoverflow.com</option>
  <option>002;anyText;http://stackoverflow.com</option>
  <option>003;anyText;http://stackoverflow.com</option>
</select>

<br>
<br>
<textarea class="hiddenText textarea" rows="8" cols="50">
</textarea>

<br>
<br>
<input class="field" type="text" />

CSS

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  background: #ffffff;
  border-bottom: 10px solid #000066;
  z-index: 0;
  background: -moz-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #d8d8d8));
  background: -webkit-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
  background: -o-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
  background: -ms-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #d8d8d8 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8', GradientType=0);
}

.nav ul li {
  display: inline-block;
  vertical-align: top;
}

.nav ul a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: black;
  text-decoration: none;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  vertical-align: bottom;
  -webkit-transition: color 0.5s;
  -moz-transition: color 0.5s;
  transition: color 0.5s;
}

.nav ul a::before {
  content: '';
  color: white;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000066;
  left: 0;
  top: 110%;
  box-shadow: -2px 2px 10px rgba(255, 255, 255, .5) inset;
  border-radius: 15px 15px 0 0 / 12px 12px;
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  transition: top 0.5s;
}

.nav ul a:hover {
  color: white;
}

.nav ul a:hover::before {
  top: 0;
  z-index: -1;
}

.nav li ul {
  position: absolute;
  display: none;
  ;
  width: inherit;
  margin: 0px;
  text-align: center;
}

ul li ul li a {
  text-align: center;
}

.nav li:hover ul {
  display: block;
}

.nav li ul li {
  display: block;
  margin-top: 10px;
}

#q9 {
  margin-top: 100px;
}

JavaScript

$(document).ready(function() {
  $('.css,.jscript,.jquery').css('pointer-events', 'none');
  $('.logOut').click(function() {
    //window.close();
  });
  // to split lines based on semicolon.
  function check() {
    var lines = $('textarea.hiddenText').val().split("-");
    var texts = [];
    for (var i = 0; i < lines.length; i++) {
      texts.push($.trim(lines[i]));
    }
    $(".masters ul, .css ul, .jscript ul").remove();
    $(".masters, .css, .jscript").append("<ul></ul>");
    for (var i = 0; i < texts.length; i++) {
      var removed1 = texts[i].split(';');
      if (parseInt(removed1[0]) == 1) {
        $(".masters ul").append($("<li></li>").text(removed1[1]));
      } else if (parseInt(removed1[0]) == 2) {
        $(".css ul").append($("<li></li>").text(removed1[1]));
      } else if (parseInt(removed1[0]) == 3) {
        $(".jscript ul").append($("<li></li>").text(removed1[1]));
      }
      /*$(".css").append($("<ul><li>").text(removed1[1]));
      $(".jscript").append($("<ul><li>").text(removed1[2]));*/
    }
  }
  // to split dropdown menu choices to lines.
  function c1() {
    var resultLines = $('.filledField').find('option').size();
    var textArea = "";
    for (var i = 1; i <= resultLines; i++) {
      var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text().split(";").splice(0, 2).join(";") + "-";
      textArea += xItem;
      //code to split xItem into individual variables
    }
    $('textarea.hiddenText').val('');
    $('textarea.hiddenText').val(textArea);
    check();
  }
  $(".field").blur(function() {
    $('.css,.jscript,.jquery').css('pointer-events', 'all');
    c1();
  });
});