Support » Plugins » Plugin: WordPress CSS Drop-down Menu – Active Link

  • 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;
    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( no-repeat 78px center;}
    /* style the second level hover */
    .menu ul ul a.drop:hover{background: url( 
    no-repeat 78px center;}
    .menu ul ul :hover > a.drop { url( 
    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; 
    /* 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;}
    /* 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;


Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Plugin: WordPress CSS Drop-down Menu – Active Link’ is closed to new replies.