Display first menu section to default open

[kb2]

I’d like to make the A item and the B items visible on default for the first section only. How can I do this via CSS? The JQuery actions are working fine and I’d rather only adjust the css. I tried :first-child and nth: unsuccessfully. Thanks.

<nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
               <nav class="primary-navigation"><ul id="menu-main" class="nav-menu"> 
<ul id="menu-main" class="nav-menu"><li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-79"><a href="#">A show as open by default</a>
<ul style="display: none;" class="sub-menu">
	<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-81"><a href="#">+ B show as open by default</a>
	<ul style="display: none;" class="sub-menu">
		<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="#">– C closed</a></li>
		<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="#">– C closed</a></li>
		<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="#">– C closed</a></li>
		<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="#">– C closed</a></li>
	</ul>
</li>
	<li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a href="#">+ B show as open by default</a></li>
	<li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-87"><a href="#">+ B show as open by default</a>
	<ul style="display: none;" class="sub-menu">
		<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="#">– C</a></li>
		<li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="#">– C</a></li>
	</ul>
</li>
	<li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="#">+ B</a></li>
</ul>
</li>
<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-has-children menu-item-71"><a href="#">A2</a>
<ul style="display: none;" class="sub-menu">
	<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="#">+ B2</a></li>
	<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a href="#">+ B2</a></li>
	<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="#">+ B2</a></li>

</ul></nav>

[PaulOB]

Hi,

Because the html has display:none in an inline style attribute the only way in css to over-ride this is by using !important.

e.g. This will open the menu.

#menu-item-79 > ul{display:block!important}

However, that probably means that your script will now not be able to close the element (if it was supposed to of course).