Help with Hidden Menu using CSS

I'm trying to create a CSS driven menu that has a sub menu that only appears when either it or one of pages in the sub-menu are selected.  The site is in liferay and is set up to where when a page is selected the "li"  ,which contains the link, class is set as "selected" and when that page is not selected the class is set as "".  I've tied setting this up several times with little success. Please see my code below and see what I'm missing. Thanks
//The HTML

<div id="communityMenu">

<div class="sort-pages modify-pages">
	<ul>
		#foreach ($nav_item in $nav_items)
			#if ($nav_item.isSelected())
				#set ($nav_item_class = "selected")
			#else
				#set ($nav_item_class = "")
			#end

			<li class="$nav_item_class">
				<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>

				#if ($nav_item.hasChildren())
					<ul class="$nav_item_class">
						#foreach ($nav_child in $nav_item.getChildren())
							<li>
								<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
		#end
	</ul>
</div>

</div>

//The CSS

/*--------Community Menu---------*/

#communityMenu{
	position:relative;
	width:160px;
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	float:left;
}

#communityMenu ul{
	margin:0;
	padding:0px;
	width:100%;
}

#communityMenu li{
	display:block;
	list-style-type:none;
	position:relative;
	font-size: 15px;
	font-family: "Arial", Helvetica, sans-serif;
	text-align:center;
	height:22px;
	background-color:#999;
	border-bottom:#FFF solid 1px;
	padding-top:3px;
}

#communityMenu li a:link, #communityMenu li a:visited{
	color:#FFF;
	font-weight:590;
	text-decoration:none;
	display:block;
	width:100%;
	margin:auto;
}

#communityMenu li a:hover{
	text-decoration:underline;
	color:#333;
}

/*#communityMenu ul li ul li{
	visibility:hidden;
}*/

#communityMenu ul li ul li .selected{
}

#communityMenu h2{
	display:block;
	position:relative;
	width:100%;
	background-color:#666;
	color:#FFF;
	height:20px;
	margin:0px;
	padding-top:5px;
	padding-bottom:5px;
	font-size:17px;
	font-weight:normal;
	text-align:center;
	border-bottom:#FFF solid 2px;
} 

#communityMenu ul .selected li ul li{
	visibility:visible !important;
	background-color:#CCC;
	border:none;
	list-style-type:disc;
	height:auto;
	margin:0px;
	padding:0px;
}

#communityMenu ul li ul .selected li a{ 
	display:inline;
	color:#333;
	margin-bottom:0px;
	padding:0px;
	text-decoration:none;
}

#communityMenu ul li ul .selected li a:hover{
	color:#00F;
}

Open in new window

Robert ThomasProgram Analyst / Web DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

the_billCommented:
I think the best thing for you to do is to create a variable, then loop through the parent items, if it has a child, loop through the child items, and set your variable to true if the child item is selected.
display the parent if your variable is true
Not sure if this will format correctly, but, in the else, check if it has child elements, loop through each one of those BEFORE printing out the li element

 #foreach ($nav_item in $nav_items)
                        #if ($nav_item.isSelected())
                                #set ($nav_item_class = "selected")
                        #else
                                  #if ($nav_item.hasChildren())
                                                #foreach ($nav_child in $nav_item.getChildren())
                                                     #if ($nav_item.isSelected())
                                                         #set ($nav_item_class = "selected")
                                                     #end
                                               #end
                                #else
                                    #set ($nav_item_class = "")
                                #end
                        #end
 <li class="$nav_item_class">
                                <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>

                                #if ($nav_item.hasChildren())
                                        <ul class="$nav_item_class">
                                                #foreach ($nav_child in $nav_item.getChildren())
                                                        <li>
                                                                <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
                                                        </li>
                                                #end
                                        </ul>
                                #end
                        </li>
#end
0
Robert ThomasProgram Analyst / Web DeveloperAuthor Commented:
The problem was I was'nt using the display css style properly. By defining each child to be display as block when child class = selected. And then hidden when not selected the function seems to work now.
The problem with my original code was I was trying to us visibility to hide the section. Which always gave me a werid result. The appropriate code can be seen below:

      #communityMenu .child-menu{
            display:none;
      }

      #communityMenu ul li ul li a{
            background:none;
            display:inline;
            color:#333
                                         }  

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.