添加<a> tags using styles results in dropdown error

Question

I have added an extra style via the ckeditor.styles.js for an < a > tag. But because it is an < a > tag, the way it is displayed in the styles dropdown is wrong. CKEDITOR renders the tag inside the < option > tag which breaks it.

The style I want to use is CTA Link, which applies an < a > tag with the class="more".

In the image below, the actual link saying CTA link doesn't work. I have to click on the weird link with no text in it to apply the style.

Update: I have now created a Codepen that demonstrates the problem - http://codepen.io/alexjlee/pen/pEvAbP

标签中显示的HTML是：

<li id="cke_1461" class="cke_panel_listItem" role="presentation">
  <a id="cke_1461_option" _cke_focus="1" hidefocus="true" title="CTA Link" 
  href="javascript:void('CTA Link')" 
  onclick="CKEDITOR.tools.callFunction(2625,'CTA Link'); return false;"     
  role="option"></a>
  <a class="more" href="#">CTA Link</a>
</li>

有没有办法覆盖CKEditor在＆lt;中显示的内容？选项＆gt;元件？我不希望它呈现＆lt; a＆gt;在其中标记，只是标签上写着“CTA Link”。