SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem showing/hiding list menus

    I am a relative newbie to CSS, in that I've essentially used it only to style text. I'm determined to wean myself of tables and do a fuller implementation in my current project, and it's going pretty well, but I've hit a stumbling block. Please look at vici.com/09site/template-hidden-default . (Sorry - I'm too new for the forum to allow me to post a link, so please add appropriate prefix and .htm at end to view.) My plan is to have the menu at left, with all the currently-hidden submenus, be a server side include. This will not be a mouseover or click-to-expand situation; programming will determine which submenu is expanded as a given page loads. I think the programming will be simpler if the submenus are hidden by default, which is what this page shows.
    I've created a class .show (which you can see in 09-page.txt (css) (attached) with display:block;. As you see in the html, the submenu under Nanovolume HPLC fittings is given the class of "show", but it doesn't show. I can't seem to get past this very basic hurdle. Any help is appreciated.
    Thanks in advance.
    Attached Files Attached Files

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the problem is that you just set this
    Code:
    .show{display:block;}
    2 Other selectors have higher specificity there
    Code:
    #nav ul{}
    #nav ul li ul{}
    Those will override .show

    Now, you need to give more specificity to your .show rule in order for it to override them.

    Or you could slap on the !important (but I wouldn't recommend doing that)
    Reading.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan. I'll take a look at the suggested reading as soon as I can and see if I can understand/fix this. If not, I'll be back begging to be spoon-fed!

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Spoon fed-
    Code:
    div#nav-wrapper div#nav ul.show{display:block; }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here's the spoon
    Code:
    .show    /* to show navigation elements as desired */
        {    display:block!important;
        }

    or instead use this:

    Code:
    #nav ul li ul.show    {   display:block;   }

  6. #6
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my gosh, manna from heaven. But I'll still try to get my head around this better - need to learn this stuff!


Bookmarks

Posting Permissions

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