Support » Themes and Templates » Menu : Current Page and Hover

  • Hello !

    I’m customizing the Mangos theme, on a local WordPress.
    I’ve succesfully modified many things but I still have got 2 problems with my menu, and after trying many things, I can’t get what I need.

    I have a menu, at the top of my slider, each menu item has a rolling child menu which appair only when you move your cursor on.
    The primary menu hover is an image, hover.gif.
    The child menus hover is just another color.

    The two problems I’ve got are :

    – When I am on a primary menu page, I have a current_page_item, which display the same image as the hover (to this point, all is right).
    But when I point the primary menu page, all of the child menu items also have my hover image (so it came from current_page_item I think ?).
    I don’t want having this image on my child menus, but I don’t find how to take it off.

    – Second one is, when I am on a child menu page, I would this page looks different (working, link become blue) but I would also have my hover image on the parent page (in the primary menu so).

    Can you help me with that ?

    Thank you.

    Here’s the menu css :

    /* -------- START PAGE MENU -------- */
    #top {
      width: 100%;
      height: 47px;
      position: absolute;
      top: 99px;
      right: 0;
      z-index: 999999999999999;
    #top ul.sf-menu {
      border: 1px solid #000;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background: url(images/top.gif) repeat-x;
      height: 41px;
      padding: 3px 2px 3px 4px;
    #top li {
      float: left;
      line-height: 45px;
      margin-right: 3px;
    #top li a {
      float: left;
      display: block;
      padding: 0 12px;
      color: #fff;
      font-family: 'DroidSansRegular';
      font-size: 12px;
      text-transform: uppercase;
      border: 0px solid transparent;
    #top li.current_page_item a, #top li a:hover {
      background: url(images/hover.gif) repeat-x;
      color: #fff;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border: 0px solid #5f6365;
    #top li ul {
      background: #111111;
      width: 187px;
      margin-top: 20px;
      padding: 0px 0 0px;
    #top ul ul ul {
      margin: -6px 0 0 45px;
    #top li li {
      border-bottom: 1px solid #3e3e3e;
      margin: 0 11px;
      width: 166px;
      line-height: 30px;
    #top li ul a {
      text-transform: none;
      padding: 0 !important;
    #top li li.current_page_item a, #top li li:hover a, #top li li:hover {
      background: none !important;
      border: 0 !important;
      border-bottom: 0px solid #3e3e3e !important;
      color: #0e668c;
    #top li li:hover a, #top li.last, #top li.last:hover {
      border: 0px solid transparent !important;
    /* -------- END PAGE MENU -------- */

Viewing 3 replies - 1 through 3 (of 3 total)
  • esmi


    Forum Moderator

    I would strongly recommend that you change to a theme from another supplier asap. Your current theme contains obfuscated (eval’d) code in its function.php file – a practice which is forbidden in themes from

    I would also suggest that you read this article.

    Thank you, but in fact, I use a modified Mangos version , which was cleaned of this malicious code 🙂

    It cames from a trustfull french website, specialized in this sort of thing, and also in theme translation.

    Here’s the answer if someone is looking fore the same thing :

    Add :

    #top li.current_page_item li a { background: none; }
    #top li.current-menu-ancestor li a  { background: none }

    #top li.current_page_item a, #top li a:hover { ...}
    #top li.current_page_item a, #top li a:hover, #top li.current-menu-ancestor a { ...}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Menu : Current Page and Hover’ is closed to new replies.