title: CSS Hiding Dropdown Menu for Specific Menu Items
body: <p>I have the following menu implemented on a HTML/CSS theme running on Confluence.</p>
  
  <p><a href="https://i.stack.imgur.com/tLznh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tLznh.png" alt="enter image description here"></a></p>
  
  <p>The theme that I'm running provides options to activate drop-down menu's for all menu items by default. However, I'd like the dropdown menu to be displayed for only one of the menu items.</p>
  
  <p>The theme doesn't provide the option to toggle dropdowns for specific menu items, which is why I'm forced to resort to custom CSS. </p>
  
  <p>The HTML corresponding to the RELEASE NOTES menu item is as so --</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li id="rw_category_key_notes" data-name-key="notes"&gt;
  
  &lt;a class="rw_custom_url" href="http://localhost:8090/display/DDB/Release+Notes"&gt;
  
  &lt;span class="rw_item_name"&gt;RELEASE NOTES&lt;/span&gt;
  &lt;span class="rw_item_dd rw_dropdown_btn"&gt;&lt;/span&gt;
  
  &lt;/a&gt;
  
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, adding the following custom CSS removes the dropdown menu for ALL menu items.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#rw_category_menu.rw_theme_underline ul.rw_category_items li a .rw_item_dd{
  display: none;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'd like CSS to conditionally not display the dropdown for the RELEASE NOTES menu item, displaying it only for LEARNING instead.</p>
  
  <p>How would I go about this?</p>
  
  <p>Thanks.</p>