# Submenu causes menu tree to disappears when mouseover 

**URL:** <https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022>\
**Category:** Pinbin\
**Created:** [July 26, 2014, 12:23pm UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022 "2014-07-26T12:23:04Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![userx](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/u/c5a1d2/32.png) [@userx](https://colorlibsupport.com/u/userx)\
**Post date:** [July 26, 2014, 12:23pm UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/1 "2014-07-26T12:23:04Z")

</div>

When I move the mouse over a submenu the menu tree and submenu disappears. The main dropdown menu works just fine, the problem seems to be with the submenu only.

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [July 28, 2014, 9:36am UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/2 "2014-07-28T09:36:32Z")

</div>

What browser do you use? It appears to working just fine for me, at least on my demo website but I am not saying that there can’t be some problems with this theme.

---

<div class="post-metadata">

**Author:** ![userx](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/u/c5a1d2/32.png) [@userx](https://colorlibsupport.com/u/userx)\
**Post date:** [July 28, 2014, 11:06am UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/3 "2014-07-28T11:06:49Z")

</div>

I’ve activated the site temporarily so that you can check out the menu problem.

I use Firefox, but I’ve opened the site in Internet Explorer and Chrome and the menu still reacts the same way.

Also I deactivated plugins but that didn’t help either.

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [July 28, 2014, 11:35am UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/4 "2014-07-28T11:35:05Z")

</div>

Those menu items acts a little weird, that’s for sure 🙂

Try to add this to style.css

```auto
.main-nav ul li {
    display: inline-block;
}

```

Not sure if it will help but I see that it is missing from the original theme files.

I have plans to recreate this theme because this was my first theme I ever released and obviously it is far from perfect. It does look nice and all but its code is a disaster. Could switch to Bootstrap and start over. So far I can’t give you an exact release date on that but hopefully within a month or so I will start working on it. It is something I have postponed for a while but it really needs to be done.

---

<div class="post-metadata">

**Author:** ![userx](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/u/c5a1d2/32.png) [@userx](https://colorlibsupport.com/u/userx)\
**Post date:** [July 28, 2014, 11:59am UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/5 "2014-07-28T11:59:45Z")

</div>

Placed the code in style.css, but the problem persists. It’s something I can live with. I’ll tinker with the menu and see if I can find a work-around. If not, I can always remove the sub-menus.

By-the-way…if this is your first theme, congratulations, because you did an outstanding job! I really like the theme, it’s an eye catcher.

---

<div class="post-metadata">

**Author:** ![angus](https://colorlibsupport.com/user_avatar/colorlibsupport.com/angus/32/3843_2.png) [@angus](https://colorlibsupport.com/u/angus)\
**Post date:** [December 13, 2014, 9:31pm UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/6 "2014-12-13T21:31:43Z")

</div>

\>\> I have plans to recreate this theme because this was my first theme I ever released and obviously it is far from perfect. It does look nice and all but its code is a disaster.

Uh oh, did you end up recreating ?

---

<div class="post-metadata">

**Author:** ![ulfert](https://colorlibsupport.com/user_avatar/colorlibsupport.com/ulfert/32/2229_2.png) [@ulfert](https://colorlibsupport.com/u/ulfert)\
**Post date:** [April 1, 2016, 10:08pm UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/7 "2016-04-01T22:08:26Z")

</div>

Hi,  
I have the same problem. As long as I dont have any submenus all works fine. But when I try to have submenues all disappear when I click n the menu item. The link shows as # - not the real page.  
Did you found a solution?

---

<div class="post-metadata">

**Author:** ![ulfert](https://colorlibsupport.com/user_avatar/colorlibsupport.com/ulfert/32/2229_2.png) [@ulfert](https://colorlibsupport.com/u/ulfert)\
**Post date:** [April 1, 2016, 10:10pm UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/8 "2016-04-01T22:10:11Z")

</div>

Did you found a solution for this? I have the same problem…

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [April 14, 2016, 1:39pm UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/9 "2016-04-14T13:39:26Z")

</div>

Hi @ulfert,

This is the default behavior of Bootstrap framework that we have used in our theme. You can confirm it on the following Bootstrap framework nav menu demo page.

[http://getbootstrap.com/examples/navbar/](http://getbootstrap.com/examples/navbar/)

If you want to make the top level menu link visited on clicking on it then you can use the solution posted in the following reply.

> [@Correct menu structure with clickable top menu for Sparkling theme](https://colorlibsupport.com/t/correct-menu-structure-with-clickable-top-menu-for-sparkling-theme/7613):
>
> Hi everyone, I am sure this is a basic question, but I am struggling about having a correct menu structure. Basically, I have the following menu structure Activity → Top level main menu - which is a page – Sub Activity 1 → which is a page – Sub Activity 2 → which is a page So I have 2 questions when I go on the page sub activity 1 or 2, the main menu item “Activity” is not colored to show that I am in this menu, what structure should I use to have the main menu item colored? How do …

Best Regards,  
Movin

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 17, 2021, 5:14am UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/10 "2021-05-17T05:14:40Z")

</div>

This case is closed

Thanks

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [May 17, 2021, 5:14am UTC](https://colorlibsupport.com/t/submenu-causes-menu-tree-to-disappears-when-mouseover/6022/11 "2021-05-17T05:14:43Z")

</div>


