Mouse out is not working with all directions

Question

HTML

<!--DASHBOARD-->
   <li class="always_show">
      <span class="menu_large_item" style="display: none;">
          <a href="/xyz/dashboard">
             <div class="ribbon-body-prof-menu">Dashboard</div>
          </a>
      </span>
      <a class="menu_small_item" href="/dashboard"> V </a>
    </li>
 <!--DASHBOARD-->


<!--PROFILE -->
    <li class="always_show" id="profile_menu_item">  
        <span class="menu_large_item" style="display: none;">
            <a href="/xyz/profile/iprofile/id/3">
                <div class="ribbon-body-prof-menu"> Profile</div>
            </a>
 <!--PROFILE -->
        </span>
        <a class="menu_small_item" class="selected" href="/profile/iprofile/id/3">

<!-- <img src="http://localhost/xyz/public/images/icon-industries.png" alt="Profile" title="Profile" width="12" height="15"> -->
                    N
        </a>
     </li>

Now I want that when i hover over the menu_small_item, the menu_large_item part shows and when I mouse out from menu_small_item, then menu_large_item part hides. Same is happening but in case of last item in my html, when I take my mouse out from downwards nothing happens.

jQuery:

    $('li.always_show, a.menu_small_item').mouseover(function(){
        $(this).siblings('li.always_show span.menu_large_item').show();
    $(this).siblings('span').children('a').children('div.ribbon-body-prof-menu').show();
});
$('li.always_show span.menu_large_item, .ribbon-body-prof-menu').mouseout(function(){
    $(this).hide();
    $('li.always_show span.menu_large_item').hide();
    $('div.ribbon-body-prof-menu').css('display','none');       
});

I have implemented the same on

https://jsfiddle.net/shilpi_jas/nh1n4pcv/ Any help will be appreciated.

Answer 1

I have the feeling the complicated HTML+CSS structure (with use of floats and so on) somehow is causing this. If you inspect your code with developer tools, you can see the overlay when you hover each element composing your HTML is most of the time not at the right place. I then thought about a no-js solution which from where I see it is very similar to your functionality, with a much simpler HTML... and no javascript to fail. Here's my proposition that you can hopefully fit into your application, or at least take inspiration from :

HTML

<ul>
    <li>
        <a class="menu_small_item" href="#">A</a>
        <a class="menu_large_item" href="#">Lorem</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">B</a>
        <a class="menu_large_item" href="#">Ipsum</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">C</a>
        <a class="menu_large_item" href="#">Dolor</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">D</a>
        <a class="menu_large_item" href="#">Sit</a>
    </li>
    <li>
        <a class="menu_small_item" href="#">E</a>
        <a class="menu_large_item" href="#">Amet</a>
    </li>
<ul>

CSS

ul {list-style-type:none;width:100px;}
li {margin-bottom:15px;cursor:pointer;}
li a {display:block;width:85px;padding:5px;text-decoration: none;}
.menu_small_item { color: #b084e9;}
.menu_large_item { display: none;color: #fff;background: #4D356F;box-sizing: border-box;}
li:hover > .menu_small_item {display:none;}
li:hover > .menu_large_item {display:block;}

And the fiddle for demo