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

Question

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

我正在运行的主题默认提供用于激活所有菜单项的下拉菜单的选项。但是，我希望仅对其中一个菜单项显示下拉菜单。

主题没有提供为特定菜单项切换下拉菜单的选项，这就是为什么我不得不诉诸自定义CSS的原因。

与RELEASE NOTES菜单项相对应的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菜单项的下拉菜单，而只显示LEARNING。

我将如何处理？

谢谢。

Answer 1

如果您只想定位元素的第一个实例，则可以使用

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>

Answer 2

谢谢@misorude！

解决了，我申请-

#rw_category_key_notes .rw_dropdown_btn { display: none; }

根据您的建议选择主题的自定义CSS。就其本身而言，它不会隐藏“发行说明”菜单项的下拉菜单，但是在末尾添加！important使其起作用。

#rw_category_key_notes .rw_dropdown_btn { display: none !important; }