Grow your CSS skills. Land your dream job.

Making title appear on hover in tabbed menu (WP)

  • # June 12, 2013 at 11:27 am

    Greetings:

    I just joined in the hope I could get this seemingly simple problem solved.

    My web site [http://www.eswr.com] is built with the Suffusion theme for WordPress. I have a tabbed menu with pages and categories. The theme allows titles to be shown for the categories on hover, but I cannot figure out how to do the same for the page tabs.

    This is from my style.css file

    /* main menu */
    #nav {
    font-size: 108%;
    border-bottom: 1px solid;
    }

    .float-ptr {
    font-size: 130%;
    float: right;
    background: url(images/arrows.gif) no-repeat scroll -16px 0 transparent;
    height: 8px;
    width: 8px;
    top: 45%;
    right: 3px;
    position: absolute;
    }
    .down-ptr {
    font-size: 130%;
    float: right;
    background: url(images/arrows.gif) no-repeat scroll 0 0 transparent;
    height: 8px;
    width: 8px;
    top: 45%;
    right: 5px;
    position: absolute;
    margin-left: 5px;
    }
    img.home-icon { height: 21px; }
    #nav ul li a.with-arrow, #nav-top ul li a.with-arrow { padding-right: 22px;}
    /* remove all the bullets, borders and padding from the default list styling */
    #nav ul {
    list-style: none;
    display: block;
    margin: 0 0 -1px 0;
    padding: 0;
    float: left;
    vertical-align: bottom;
    }

    #nav ul li {
    margin: 0 4px 0 0;
    padding: 0;
    float: left;
    border: 1px solid;
    }
    #nav.continuous ul, #nav-top.continuous ul {
    margin-left: 10px;
    }
    #nav.continuous ul ul, #nav-top.continuous ul ul {
    margin-left: 0;
    }
    #nav.continuous ul li {
    margin: 0;
    border: none;
    }
    #nav ul ul { position: absolute; }
    #nav ul .mm-tab ul { position: relative; }
    #nav ul li a {
    padding: 8px 8px 5px 8px;
    text-decoration: none;
    display: inline-block;
    }

    #nav ul ul li,
    #nav ul ul li a {
    z-index: 100;
    }

    #nav .current_page_item a,
    #nav .current_page_item a:hover,
    #nav li a:active {
    text-decoration: none;
    }

    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    #nav li {
    float:left;
    position:relative;
    z-index: 1;
    }

    #nav li a:hover,
    #nav li:hover {
    z-index: 100;
    }

    #nav ul.sf-menu, #nav-top ul.sf-menu { display: inline-block; }
    #nav .col-control.center, #nav-top .col-control.center { text-align: center; }
    #nav .col-control.center ul.sf-menu, #nav-top .col-control.center ul.sf-menu { float: none; }
    #nav .col-control.right ul.sf-menu { float: right; }

    /* Styling for navigation menus */
    #nav ul ul li a,
    #nav ul ul li a:visited {
    padding: 8px 8px 5px 8px;
    text-decoration: none;
    display: block;
    line-height:22px;
    }

    Let me know what you need me to post here to help solve the problem

    I tried to start a pen but I’m not sure if it took.

    Steve Davies
    Endangered Species & Wetlands Report
    Takoma Park, MD

    # June 12, 2013 at 11:39 am

    >The theme allows titles to be shown for the categories on hover, but I cannot figure out how to do the same for the page tabs.

    Do you mean the sub menu items are styled differently on the sub pages as opposed to the main page?

    # June 12, 2013 at 12:58 pm

    No, I don’t think so. You can see what I’m getting at if you scroll over Daily Links and the title with a description comes up (“Whatever fits in this category”). But for ESA, Wetlands, Courts, Enforcement, Legislative History, which are all pages, I can’t figure out where to insert a title and get it to appear when I put the cursor over the menu tab.

    # June 12, 2013 at 1:03 pm

    You have to add a `title` attribute to get that…see

    Your other links don’t have that.

    I would guess that’s in the PHP somewhere.

    # June 12, 2013 at 1:09 pm

    I thought it was simple…. Lemme do the php thing. I thought I could do custom CSS.

    Thanks, lemme try it and get back with you

    # June 12, 2013 at 2:08 pm

    I’m lost in a world of php files.

    If I had a clue what all the code means, I suppose I could fix it….

    # June 12, 2013 at 3:09 pm

    If you’re using a theme that supports the (not so new) menu system for navigation, you can go into Appearance -> Menus from the main dashboard and adjust the title attributes from there.

    Click the V arrow on the far right of a menu item, and next to the menu label should be a box for inserting title attributes.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".