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?
 
Robert ThomasConnect With a Mentor Program 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
 
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
All Courses

From novice to tech pro — start learning today.