WordPress.org

Ready to get started?Download WordPress

Forums

Plugin: WordPress CSS Drop-down Menu - Active Link (3 posts)

  1. Jennifer420
    Member
    Posted 4 years ago #

    Hello again,

    I'm using the WordPress CSS Drop-down Menu and have managed to edit the menu to my liking (still have a bit of tweaking to do). However, I'm wondering if there's a way I can have the active page highlighted - perhaps using a small block of background color?

    I've tried editing the css for it a bit, but can't seem to get it to work.

    The theme I'm working on his here: and the css for the menu is below.

    Any direction would be greatly appreciated ... I've been working on this theme for weeks and really tiring of it! Lol

    .menu {
    margin-top: -87px;
    margin-left: 26px;
    padding: 10px;
    position: absolute;
    width:auto;
    z-index:4;
    text-align: center; }
    
    /* hack to correct IE5.5 faulty box model */
    * html .menu {width:746px; w\idth:745px;}
    
    /* remove all the bullets, borders and padding from the default list styling */
    
    .menu ul {padding:0;margin:0;list-style-type:none;}
    .menu ul ul {width:75px;margin-right: 20px;}
    
    /* float the list to make it horizontal and a relative position so that you can control the 
    
    dropdown menu positon */
    .menu li {float:left;position:relative; padding:0; }
    
    /* style the links for the top level */
    .menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#fff; padding: 0 
    
    10px; height:20px;  font-weight:bold; }
    
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .menu a, * html .menu a:visited {width:70px; w\idth:70px;}
    
    /* style the second level background */
    .menu ul ul a.drop, .menu ul ul a.drop:visited 
    
    {background:url(http://www.cssplay.co.uk/menus/breadcrumbs/grey-arrow.gif) no-repeat 78px center;}
    
    /* style the second level hover */
    .menu ul ul a.drop:hover{background: url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) 
    
    no-repeat 78px center;}
    
    .menu ul ul :hover > a.drop { url(http://www.cssplay.co.uk/menus/breadcrumbs/blue-arrow.gif) 
    
    no-repeat 70px center;}
    
    /* hide the sub levels and give them a position absolute so that they take up no room */
    .menu ul ul {visibility:hidden;position:absolute;height:0;padding-top: 10px;left:0; width:89px;}
    
    /* another hack for IE5.5 */
    * html .menu ul ul {top:30px;t\op:31px;}
    
    /* style the table so that it takes no part in the layout - required for IE to work */
    .menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
    
    /* style the second level links */
    .menu ul ul a, .menu ul ul a:visited { color:#000; height:auto; line-height:1em; padding:5px 5px; 
    
    width:68px;}
    
    /* yet another hack for IE5.5 */
    * html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:68px;}
    
    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover{color:#f7921e;}
    .menu :hover > a, .menu ul ul :hover > a {color:#f7921e;}
    
    li a.active{color:#f7921e;}
    
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul{visibility:visible; }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{visibility:hidden;}
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ visibility:visible;}
    
    .menu ul ul .current_page_item a {
      color: red;
      background: white;
      border-left: 1px solid black;
    }
    
    .menu .current_page_item a {
      color: red;
      font-weight: bold;
      background: white;
    }
    
    .menu ul .current_page_item ul a:hover {
      background: gray;
    }
    
    .menu .current_page_item a:hover {
      background: white;
    }

    Thanks,
    Jennifer

  2. Jennifer420
    Member
    Posted 4 years ago #

    Anyone have any idea? I just can't seem to get it ...

    Sorry for not closing the link in my post by the way, can't figure out how to edit it!

  3. Possy
    Member
    Posted 4 years ago #

    This I think explains what your wanting:
    Dynamic Menu Highlighting

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.