Title: Plugin: WordPress CSS Drop-down Menu – Active Link
Last modified: August 19, 2016

---

# Plugin: WordPress CSS Drop-down Menu – Active Link

 *  [jennifer420](https://wordpress.org/support/users/jennifer420/)
 * (@jennifer420)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/plugin-wordpress-css-drop-down-menu-active-link/)
 * Hello again,
 * I’m using the [WordPress CSS Drop-down Menu](http://www.zackdesign.biz/wp-plugins/42)
   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.](http://mafiakitty.com/work/nageela/)
 * 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

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [jennifer420](https://wordpress.org/support/users/jennifer420/)
 * (@jennifer420)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/plugin-wordpress-css-drop-down-menu-active-link/#post-1176652)
 * 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!
 *  [possy](https://wordpress.org/support/users/possy/)
 * (@possy)
 * [16 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-css-drop-down-menu-active-link/#post-1176905)
 * This I think explains what your wanting:
    [Dynamic Menu Highlighting](http://codex.wordpress.org/Dynamic_Menu_Highlighting)

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Plugin: WordPress CSS Drop-down Menu – Active Link’ is closed to new 
replies.

 * 2 replies
 * 2 participants
 * Last reply from: [possy](https://wordpress.org/support/users/possy/)
 * Last activity: [16 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-css-drop-down-menu-active-link/#post-1176905)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics