css - 文字奇怪的蓝色下划线？

Question

<p>Text adjustement
 <span>
  - [b](text)[/b] for <b>Bold</b><br>
  - [u](text)[/u] for <u>Underlined</u><br>
  - [i](text)[/i] for <i>Italic</i><br>
  - [s](text)[/s] for <s>Strike</s><br>
  <br>
  - [big](text)[/big] for big text<br>
  - [medium](text)[/medium] for medium-large text<br>
  - [small](text)[/small] for small text<br>
 </span>
</p>

table.fancy td.tdtop p {
    color: blue;
    display: block;
}

table.fancy td.tdtop p:hover {
    text-decoration: underline;
    cursor: pointer;
}

table.fancy td.tdtop p span {
    color: black;
    display: none;
    padding: 2px;
    padding-left: 4px;
    border: 1px solid #e0e0e0;
    background: #f0f0f0;
    text-decoration: none;
}

table.fancy td.tdtop p:hover span {
    display: block;
    text-decoration: none !imporant;
    color: black !imporant;
}

当您将鼠标悬停在 <p> 时，我试图让一个框显示出来，但这就是我得到的：

Answer 1

演示

这是你需要的吗？清理 css 的问题。