ThemeShaper Forums » Thematic

Drop Down menu styling

(5 posts)
  • Started 5 years ago by alst
  • Latest reply from Chris
  • This topic is not resolved
  1. alst
    Member

    Have had some great success integrating a mixed pages and category dropdown menu.

    Now trying to get some styling and having a small CSS problem.

    Using the auto created cat-item-x class that is formed I'm trying to change the background of the top menu item.

    Not having a lot of success.

    How do I combine the sfmenu class with the cat-item-x class to change the background of a specific cat class?

    have tried .sfmenu.cat-item-x {background:red;} but it's not working.

    Any ideas?

    Posted 5 years ago #
  2. Hi,

    using Thematic Powerblog this would be #category-access .sf-menu .cat-item-1 a {background: red;}

    .sf-menu .cat-item-1 a {background: red;} should work .. otherwise drop me a link to your blog.

    Cheers,

    Chris

    Posted 5 years ago #
  3. alst
    Member

    HI Chris,

    Thanks for your response. Got want i wanted with the following altered skin stylesheet. One last thing. Hover changes the background to grey, but as you scroll down the sub-categories drop down the parent category remains highlighted with the hover colour. So I get two highlighted blocks. Any way you can think to unhover the parent category when moving down the sub-categories?


    .sf-menu {
    border-right:1px solid #ccc;
    float:left;
    }

    .sf-menu a {
    border-left:1px solid #ccc;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    padding:9px 13px;
    text-decoration:none;
    }
    .sf-menu .current_page_item a,
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
    border-bottom-color:#fff;
    }
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    color: white;
    }

    .sf-menu li.cat-item-9 {
    background: red;
    }

    .sf-menu li.cat-item-9 {
    background: red;
    }

    .sf-menu li.cat-item-34 {
    background: #3c5ef5;
    }

    .sf-menu li.cat-item-8 {
    background: green;
    }

    .sf-menu li {
    background: black;
    }

    .sf-menu li li {
    background: black;
    }
    .sf-menu li li li {
    background: black;
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background: #666;
    outline: 0;
    border-bottom-color:#ccc;
    }
    .sf-menu ul {
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:32px; /* overriding essential styles */
    }
    .sf-menu ul ul {
    margin-top:0;
    }
    .sf-menu ul a {
    background:black;
    border-bottom:none;
    }
    .sf-menu ul a:hover {
    color: white;
    background:#666;
    }

    Posted 5 years ago #
  4. alst
    Member

    Just to explain. Have got a handcrafted menu with a combination of page links and wp_list_categories with exclusions.

    Posted 5 years ago #
  5. Change the background for .sf-menu .current_page_parent

    Chris

    Posted 5 years ago #

RSS feed for this topic

Reply

You must log in to post.