Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How do I hide child items in menu?

    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:

    Code:
    /* 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

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Adding display: none; here will hide your sub menus.

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

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    This should do the trick.

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

  • Users who have thanked dan-dan for this post:

    inreason (04-21-2012)

  • #5
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    You'll also need position: absolute; for the hidden UL's.

    Code:
    div.submenu ul li ul
    {
        position: absolute;
        display: none;
        background-image: url('../images/subsubbac.png');
        background-repeat: repeat-y;
        background-position: top left;
    }
    Last edited by dan-dan; 04-21-2012 at 12:14 PM.

  • #6
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:
    Code:
    div.submenu li.active ul {
        display: block;
    }
    Thanks again!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •