Question: I'm using superfish menu and I have a problem.

In the header, I have a logo holder `div` with the logo badge `div` and logo name `div` inside. When the user hovers over a top level link the sf-mega drop menu is show and a class of `.sfHover` is applied to the parent `li`.

My issue is that I need the logo badge to show on top of the drop down menu BUT not the logo name `div`.

Using z-indexes are out I think so (I have tried) so I wanted to hide the logo name div when the `.sfHover` class is active on the menu `li` so I have this code but it is not hiding it.

```
if ($('#mainMenu.sf-menu ul li').hover().hasClass('sfHover') == true) {
    $('.logoHolder .kingsworthName').hide();
}

```

Any help is appreciated.

Answer: 
Your usage of [hover()](https://api.jquery.com/hover/) is wrong here. It expects handler functions as argument. You should use it like this : 

```
$('#mainMenu.sf-menu ul li').hover(
   function() {  // when the mouse pointer enters the element.
     if ($(this).hasClass('sfHover')) {
         $('.logoHolder .kingsworthName').hide();
       }
     },
   function () {} // when the mouse pointer leaves the element.
);

```
You can use pure css. here's the link.

```
//css FILE
.box {
  height: 300px;
  width: 300px;
  background: red;
}

.hidden {
  height: 100px;
  width: 100px;
  background: white;
  display:none;
}

.box:hover .hidden {
    display: block;
}

//HTML

<html>

<body>
  <div class="box">
    <div class="hidden">
      Hello there
    </div>
  </div>
</body>
</html>

```

<https://jsfiddle.net/8Ldwm10p/>