Question

我制作了一个下拉菜单，虽然它工作正常并且行为与我想要的完全相同但有一个问题似乎无法纠正。

对于一些下拉菜单，我会在下面添加一些评论来帮助用户。例如：

<a href="/#"><b>test</b> <br/><span>testing comment</span></a>

我不想在锚点内部发表评论，而是希望将其置于其外部并以同样的方式进行观察/行动。推理...... Google让我感到害怕，我不希望他们认为我是关键词填充...特别是因为最初显示的是下拉菜单：隐藏。我想的是：

<a href="/#"><b>test</b></a> <br /><span>testing comment</span></

一定是可能的，但我似乎无法得到它。这个小提琴的完整代码和CSS - jsfiddle

<div class="drop-menu">
                <ul>
                    <li><a class="full" href="/#">number 1</a>
                        <ul>
                            <li><a href="/#"><b>test</b> <br/><span>testing comment</span></a></li>
                            <li><a href="/#"><b>test</b> <br/><span>testing comment</span></a></li>
                            <hr/>
                            <li><a href="/#"><b>testing</b> <br/><span>testing comment</span></a></li>
                        </ul>
                    </li>
                    <li><a href="/#">number 2</a></li>
                    <li><a class="purchase" href="/#"><img alt="cart" height="16" src="/images/trans.gif" width="16"> number 3</a></li>
                    <li><a class="full" href="/#">number 4</a>
                        <ul>
                            <li><a href="/#">testing</a></li>
                            <li><a href="/#">testing</a></li>
                            <li><a href="/#">testing</a></li>
                        </ul>                   
                    </li>
                    <li><a href="/#">number 5</a></li>
                </ul>
</div>

Answer 1

你可以这样做：

<li><a href="/#"><b>test</b></a><span>testing comment</span></li>

当您将鼠标悬停在li上时，背景将产生相同的效果。

.drop-menu li ul li:hover {
  background:#c4dcec;
  overflow: hidden;
  display: block;
}

更改下拉菜单以避免长锚

1 个答案: