CSS隐藏特定菜单项的下拉菜单

Question

我在Confluence上运行的HTML/CSS主题上实现了以下菜单。

默认情况下，我正在运行的主题提供了激活所有菜单项的下拉菜单的选项。但是，我希望只为其中一个菜单项显示下拉菜单。

该主题没有提供切换特定菜单项下拉列表的选项，这就是为什么我不得不求助于自定义CSS。

与发行说明菜单项对应的HTML如下--

<li id="rw_category_key_notes" data-name-key="notes">

<a class="rw_custom_url" href="http://localhost:8090/display/DDB/Release+Notes">

<span class="rw_item_name">RELEASE NOTES</span>
<span class="rw_item_dd rw_dropdown_btn"></span>

</a>

</li>

此外，添加以下自定义CSS将删除所有菜单项的下拉菜单。

#rw_category_menu.rw_theme_underline ul.rw_category_items li a .rw_item_dd{
display: none;
}

我希望CSS有条件地不显示RELEASE NOTES菜单项的下拉列表，而只显示用于学习。

我该怎么办？

谢谢

Answer 1

谢谢你，@misoroud！

解决了，我申请了--

#rw_category_key_notes .rw_dropdown_btn { display: none; }

Answer 2

如果希望只针对元素的第一个实例，则可以使用

ul.your-ul-class > li {
  // target only the 1st node instance
}

ul.your-ul-class li > li.second-intance {
  // target only the 2nd node instance
}

这将只是节点的第一个实例

ex:
<ul>
  <li> -- CSS implemented -- <li>
  <li> -- CSS implemented --
    <ul>
      <li class="second-intance" > -- NO CSS implemented -- </li>
    </ul>
  </li>
<ul>