Javascript 将鼠标悬停在菜单元素上以显示子菜单

我试图创建一个菜单，它有一个子菜单（不是下拉菜单），当鼠标滑过时，它会从左向右滑动；鼠标离开时从右向左移动

JSFiddle：

两个并排的垂直菜单：

HTML代码：

<aside class="nav-container">

  <!--Main Navigation Structure-->
    <ul id="nav-main">
      <a href="#"><li class="fa fa-home fa-2x" id="home"></li><br/></a>
      <a href="#"><li class="fa fa-folder fa-2x" id="projects"></li><br/></a>
      <a href="#"><li class="fa fa-user fa-2x" id="about"></li><br/></a>
      <a href="#"><li class="fa fa-envelope fa-2x" id="contact"></li><br/></a>

      <!--Additional Navigation Buttons-->
      <div id="nav-additionals">
          <a href="#"><p class="fa fa-cogs fa-s" id="settings"></p></a>
          <a href="#"><p class="fa fa-question fa-s" id="about"></p></a>
      </div>
    </ul>

    <!--Projects submenu-->
    <ul id="proj_menu">
      <a href="#"><li class="icon-python"></li></a>
      <a href="#"><li class="icon-java-bold"></li></a>
      <a href="#"><li class="icon-csharp"></li></a>
      <a href="#"><li class="icon-cplusplus"></li></a>
      <a href="#"><li class="icon-javascript"></li></a>
      <a href="#"><li class="icon-html"></li></a>
      <a href="#"><li class="icon-ruby"></li></a>
      <a href="#"><li class="icon-php"></li></a>
    </ul>
</aside>

<script>
  $("document").ready(function(){

    //hides menu when loaded
    $("#proj_menu").hide();

    //shows and hides projects sub menu
    $("#projects").mouseover(function(){

      //if it is hovered SHOW
      if($("#projects").is(":hover")){
          $("#proj_menu").show();
      }
      //if it is not hovered HIDE
      else if($("#projects").not(":hover")){
          $("proj_menu").hide();
      }
    });
  });
</script>

JQuery代码：

<aside class="nav-container">

  <!--Main Navigation Structure-->
    <ul id="nav-main">
      <a href="#"><li class="fa fa-home fa-2x" id="home"></li><br/></a>
      <a href="#"><li class="fa fa-folder fa-2x" id="projects"></li><br/></a>
      <a href="#"><li class="fa fa-user fa-2x" id="about"></li><br/></a>
      <a href="#"><li class="fa fa-envelope fa-2x" id="contact"></li><br/></a>

      <!--Additional Navigation Buttons-->
      <div id="nav-additionals">
          <a href="#"><p class="fa fa-cogs fa-s" id="settings"></p></a>
          <a href="#"><p class="fa fa-question fa-s" id="about"></p></a>
      </div>
    </ul>

    <!--Projects submenu-->
    <ul id="proj_menu">
      <a href="#"><li class="icon-python"></li></a>
      <a href="#"><li class="icon-java-bold"></li></a>
      <a href="#"><li class="icon-csharp"></li></a>
      <a href="#"><li class="icon-cplusplus"></li></a>
      <a href="#"><li class="icon-javascript"></li></a>
      <a href="#"><li class="icon-html"></li></a>
      <a href="#"><li class="icon-ruby"></li></a>
      <a href="#"><li class="icon-php"></li></a>
    </ul>
</aside>

<script>
  $("document").ready(function(){

    //hides menu when loaded
    $("#proj_menu").hide();

    //shows and hides projects sub menu
    $("#projects").mouseover(function(){

      //if it is hovered SHOW
      if($("#projects").is(":hover")){
          $("#proj_menu").show();
      }
      //if it is not hovered HIDE
      else if($("#projects").not(":hover")){
          $("proj_menu").hide();
      }
    });
  });
</script>

$（“文档”）.ready（函数（）{
//加载时隐藏菜单
$（“#项目菜单”）.hide（）；
//显示和隐藏项目子菜单
$（“#项目”）.mouseover（函数（）{
//如果是悬停显示
如果（$（“#projects”）.is（“：hover”））{
$（“#项目菜单”）.show（）；
}
//如果未悬停，则隐藏
else if（$（“#项目”）.not（“：hover”））{
$（“项目菜单”）.hide（）；
}
});
});

也许是这样的

更新：

<aside class="nav-container">

  <!--Main Navigation Structure-->
    <ul id="nav-main">
      <a href="#"><li class="fa fa-home fa-2x" id="home"></li><br/></a>
      <a href="#"><li class="fa fa-folder fa-2x" id="projects"></li><br/></a>
      <a href="#"><li class="fa fa-user fa-2x" id="about"></li><br/></a>
      <a href="#"><li class="fa fa-envelope fa-2x" id="contact"></li><br/></a>

      <!--Additional Navigation Buttons-->
      <div id="nav-additionals">
          <a href="#"><p class="fa fa-cogs fa-s" id="settings"></p></a>
          <a href="#"><p class="fa fa-question fa-s" id="about"></p></a>
      </div>
    </ul>

    <!--Projects submenu-->
    <ul id="proj_menu">
      <a href="#"><li class="icon-python"></li></a>
      <a href="#"><li class="icon-java-bold"></li></a>
      <a href="#"><li class="icon-csharp"></li></a>
      <a href="#"><li class="icon-cplusplus"></li></a>
      <a href="#"><li class="icon-javascript"></li></a>
      <a href="#"><li class="icon-html"></li></a>
      <a href="#"><li class="icon-ruby"></li></a>
      <a href="#"><li class="icon-php"></li></a>
    </ul>
</aside>

<script>
  $("document").ready(function(){

    //hides menu when loaded
    $("#proj_menu").hide();

    //shows and hides projects sub menu
    $("#projects").mouseover(function(){

      //if it is hovered SHOW
      if($("#projects").is(":hover")){
          $("#proj_menu").show();
      }
      //if it is not hovered HIDE
      else if($("#projects").not(":hover")){
          $("proj_menu").hide();
      }
    });
  });
</script>

---

将下面的css类添加到proj_菜单

.menu2col li {
    width: 155px !important;
    float: left !important;
    margin-right: 10px !important;
    /*display:inline-block !important;*/
}

---

希望它能起作用。

@JeremyRajan JSFIDDLE现在发布。需要一些技巧，但为我指明了正确的方向，谢谢！！！为我节省了一些时间：）