如何才能使无序列表中只有<a>标记可单击，而不是整个列表项都可单击？

Question

我只希望文本是可点击的，而不是整个列表项目块。

<a class="menu_head">Hello</a>

<ul class="menu_body">
<li><a href="#">Sub-menu 1</a></li>
<li><a href="#">Sub-menu 2</a></li>

<li><a href="#">Sub-menu 3</a></li>
<li><a href="#">Sub-menu 4</a></li>
<li><a href="#">Sub-menu 5</a></li>

<li><a href="#">Sub-menu 6</a></li>
<li><a href="#">Sub-menu 7</a></li>
</ul>
</body>
</html>

Answer 1

将此代码添加到css中

a {display:inline-block;}