<html>

<body>
  <nav class="navigation">
    <ul>
      <li class="dropdown">
        Tools
        <ul class="sub-menu">
          <li class="dl-player">Delete Player</li>
          <li class="pl-text">Add Text</li>
        </ul>
      </li><!-- /dropdown -->
      <li class="dropdown">
        Insert Player
        <ul class="sub-menu">
          <li class="square default-players selected"></li>
          <li class="circle default-players"></li>
          <li class="triangle"></li>
          <li>Width: <input class="pl-width"></li>
          <li>Height: <input class="pl-height"></li>
          <li>Radius: <input class="pl-radius"></li>
          <li>Color: <input class="pl-color"></li>
          <button class="add-player sub-button">Add Him!</button>
        </ul>
      </li>
      <li class="dropdown">
        Change Color
        <ul class="sub-menu">
          
        </ul>
      </li>
      <li>Change Size</li>
    </ul>
  </nav>


</body>

</html>

/* Global Styles */
ul,ol,li{
  list-style:none;
  padding:0;
  margin:0;
}
body{
  margin:0;
  padding:0;
  background:#CCC;
  font-family:helvetica, arial;
}
.player{
  cursor:pointer;
}
#hide{
  display:none;
}
.selected{
  border:2px solid #FFF;
}

button{
  color: white;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 170px;
  background: #3C4544;
  display: block;
  border:0;
  border-top:1px solid white;
}


/* Navigation */
.navigation{
  background-color:#384047;
  padding:10px;
  text-align:center;
}
.navigation li{
  display: inline-block;
  padding: 7px 14px;
  color:#60676D;
  
  font-weight:bold;
  font-family: Helvetica, Arial, sans-serif;
}
.navigation li:hover{
  color: #FFF;
  cursor:pointer;
}

/* Hover Modes */
.dropdown{
 position:relative;
}
.sub-menu{
  top:40px;
  position:absolute;
  background:#384047;
  text-align:left;
  display:none;
  width:auto;
  padding:5px;
}
.sub-menu li{
  color:#9BA4AB;
}
.default-players{
  width:20px;
  height:20px;
  background:#888;
}
.circle{
  border-radius:50%;
}
.triangle{
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 30px solid #888;
}

$(document).ready(function() {

  //Submenu
  $('.dropdown').on('click', function() {
    $(this).children('.sub-menu').slideToggle(200);
    //$('body').append('<div id="hide"></div>');
  });

  //Stop from hiding when clicking on input and adding classes
  $('ul .sub-menu').click(function(e) {
    e.stopPropagation();
    $(this).focus();
  });

  //Tools
  //Delete Selected Player Player
  $('.dl-player').click(function() {
    //('').remove();
  })
  
    //Selected
  var selectedShape = $(".sub-menu li").siblings(".selected").clone().removeClass('selected').css('position', 'absolute').addClass('player');
  $('.sub-menu').on('click', 'li', function() {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
  });
  
  $('.add-player').click(function() {
    $('body').append(selectedShape);
  });

  //Adding Player
  $('.add-player').click(function() {

    var plWidth = $('.pl-width').val();
    var plHeight = $('.pl-height').val();
    var plRadius = $('.pl-radius').val();
    var plColor = $('.pl-color').val();

    var player = $('<div class="player" removeplayer="X"></div>').css({
      'width': plWidth + 'px',
      'height': plHeight + 'px',
      'border-radius': plRadius + '%',
      'background-color': plColor,

      'position': 'absolute',
    });

    $('body').append(player);
    $(player).prepend('<div class="hoverDiv"></div>')
  });

  $('.player').mousemove(function(e) {
    var removePlayer = $(this).attr('removeplayer');

  });
  $('.hover').mousemove(function (e) {
   var removePlayer = $(this).attr('removePlayer');
   $('.player .hoverDiv').text(removePlayer).show();
   $('.player .hoverDiv').css('top', e.clientY+10).css('left', e.clientX+10); 
  }).mouseout(function () {
    $('.player .hoverDiv').hide();
  });


});


//Change Color
$('')

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js