How do I hide child items in menu?

[inreason]

Hi. I am pretty new at CSS and am developing a menu. I have it the way I want it except that the "child" items show up whether that section is active or not. I would like them not to show and I think I would use the display: none; but I am not sure how that would work. Here is my code so far:

/* change added div.submenu styles */
div.submenu 
{
   color: #000000;
   font-family: 'YanoneKaffeesatzLight', sans-serif;
   font-size: 17px;
   line-height: 100%;
}

div.submenu table,
div.submenu li, 
div.submenu a,
div.submenu a:link,
div.submenu a:visited
{
	color: #23365C;
	font-family: 'YanoneKaffeesatzRegular', sans-serif;
	font-size: 17px;
	line-height: 150%;
	text-decoration: none;
	margin-left: -15px;
	text-align: right;
	padding-right: 7px;
}
div.submenu a:hover
{
	color: #6B7AB8;
}
div.submenu ul li ul
{
	background-image: url('../images/subsubbac.png');
    background-repeat: repeat-y;
    background-position: top left;
}
div.submenu ul li.active a
{
	color: #E82F00;
}
div.submenu ul li.active
{
	background-image: url('../images/subbullets_on.png');
    background-repeat: no-repeat;
    background-position: top right;
}
div.submenu ul li
{
   background-image: url('../images/subbullets_off.png');
   background-repeat: no-repeat;
   background-position: top right;
}
div.submenu ul li li a,
div.submenu ul li li a:link,
div.submenu ul li li a:visited
{
	color: #23365C;
	font-size: 16px;
}
div.submenu ul li li a:hover
{
	color: #6B7AB8;
}
div.submenu ul li li.active a
{
	color: #E82F00;
}
div.submenu ul li li
{
   background-image: url('../images/subbullets_off.png');
   background-repeat: no-repeat;
   background-position: top right;
   margin-right: 10px;
}
div.submenu ul li li.active
{
	background-image: url('../images/subbullets_on.png');
    background-repeat: no-repeat;
    background-position: top right;
}

It would be awesome if someone could give me some guidance.

Thanks in advance,
Doug

[dan-dan]

Adding display: none; here will hide your sub menus.

div.submenu ul li ul
{
    display: none;
    background-image: url('../images/subsubbac.png');
    background-repeat: repeat-y;
    background-position: top left;
}

[inreason]

Hi dan-dan,

Thanks for your reply, and yes, that did hide the sub menus but it even hides them when they are active. Do you know where or how I might add the display: block; to the code to show the active section?

Thanks!
Doug

[dan-dan]

This should do the trick.

div.submenu li:hover ul {
    display: block;
}

[dan-dan]

You'll also need position: absolute; for the hidden UL's.

div.submenu ul li ul
{
    position: absolute;
    display: none;
    background-image: url('../images/subsubbac.png');
    background-repeat: repeat-y;
    background-position: top left;
}

[inreason]

Thanks a lot for your help! The code you supplied actually is good to show the child menu items on hover (which will be useful in this project later). What I ended up using is:

div.submenu li.active ul {
    display: block;
}

Thanks again!