Botão resposta com lista

Qual é minha questão:
Eu gostaria de um código na respostas que faça uma lista igual está na imagem abaixo:





Eu já utilizo 1 código porém ele não tem o efeito de lista será que alguém poderia me ajudar.
Java:

Código:

//Alerta 1 




$(function(){
      $(function(){
        $('<a class="sceditor-button" unselectable="on"><div unselectable="on" style="background-image:url(http://i.imgur.com/Ywb5nmI.png)">a</div></a>').insertBefore('.sceditor-button-image').click(function(){
                $('#text_editor_textarea').sceditor("instance").insertText("<div class=\'aceito\'>Aceito</div>");
         });
      });
});

Css:

Código:

.aceito{
background:-moz-linear-gradient(#DFF3A8,#C4FB92);
background-color:#DFF3A8;
background-image:-webkit-linear-gradient(#DFF3A8,#C4FB92);
border-bottom:1px solid #B7E789;border-top:1px solid #EDF7D0}
.aceito::before{
content:url(http://i31.servimg.com/u/f31/17/41/76/40/succes10.png);
float:left;
margin-right:20px}
.aceito b,.aceito strong{
color:#61B316;
margin-right:15px}
.aceito{
-moz-border-radius:5px;
-moz-box-shadow:2px 2px 2px #cfcfcf;
-webkit-border-radius:5px;
-webkit-box-shadow:2px 2px 4px #CFCFCF;
border-radius:5px;
box-shadow:2px 2px 2px #CFCFCF;
color:#323232;
display:block;
line-height:21px;
margin-bottom:30px;
min-height:40px;
padding:15px 10px 15px 20px;
position:relative;
text-align:justify;
text-shadow:0 0 1px #F9F9F9;
width:580px}

Endereço do meu fórum:
http://www.starcraft2.azureforum.com

Versão do fórum:
PHPBB2

Olá!

Substitua por este código:

Código:

$(window).load(function() {
    var settings = {
      img : 'http://2img.net/i/fa/admin/icones/small_ico/configuration.png',
      title : 'Moderação'
    };
    if (_userdata["user_level"] == '1' || _userdata["user_level"] == "2") {
        $('.sceditor-group:last').after('<div class="sceditor-group"><a class="sceditor-button sceditor-button-message" title="'+settings["title"]+'"><div style="background:url('+settings["img"]+') no-repeat;"></div></a></div>');
        $('body').append('<div id="messageList" style="z-index:15;display:none;position:absolute;background:#fff;border:1px solid #ccc;padding:3px;"><div id="itens_fa" class="listItem" style="cursor:pointer;">MENSAGEM 1</div><div id="M2" class="listItem" style="cursor:pointer;">MENSAGEM 2</div><div id="M3" class="listItem" style="cursor:pointer;">MENSAGEM 3</div></div>');
     
     
      $('.sceditor-button-message').click(function() {
          var display = $('#messageList').css('display');
          if (display == 'none') {
            var Y = $(this).offset().top;
            var X = $(this).offset().left;
            $('#messageList').show().offset({top:Y + 25,left:X});
          }
          else { $('#messageList').hide(); }
      });
       
      $('#itens_fa').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 1',''); });
      $('#M2').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 2',''); });
      $('#M3').click(function() { $('#text_editor_textarea').sceditor('instance').insertText('MENSAGEM 3',''); });
      $('.listItem').click(function() { $(this).parent().hide(); });
    }
});

Modifique-o ao seu gosto.

Resolvido!