title: Force submenu to be visible, when parent menu is open in jquery.menu-aim
body: <p>I am building a Magento Menu using <code>HoverIntent</code> and <code>jquery.menu-aim</code> (only second is important for this question).</p>
  
  <p>I am almost done, but I have no idea, how to force first submenu entry to be visible by default, parent dropdown menu is opened. At this moment, user sees nothing and must first hover over a parent menu entry.</p>
  
  <p>I tested things like making the first menu-entry to display: block using nth-child(1) via css and/or jQuery but had no success so far as I got overlapping and so on. See last commented line in my CSS.</p>
  
  <p>Here is <a href="http://codepen.io/anon/pen/emzWwg" rel="nofollow">codepen example</a> and here is my code pasted: </p>
  
  <p><strong>Updated</strong> code example on <a href="http://jsfiddle.net/vf2bqm29/4/" rel="nofollow">fiddle</a></p>
  
  <p>jQuery:</p>
  
  <pre><code>    jQuery('.nav ul').menuAim({
      activate: activateSubmenu,
      deactivate: deactivateSubmenu
  
  });
  
  function activateSubmenu(row) {
      var $row = jQuery(row),
          $submenu = $row.children('.nav-sub').children('ul'),
          $subbg = $row.children('.nav-sub').children('div'),
          $subh1 = $row.children('.nav-sub').children('h1');
      $row.children('a').addClass('hover');
      $submenu.css({
          display: 'block'
      });
      $subbg.css({
          display: 'block'
      });
      $subh1.css({
          display: 'block'
      });
  }
  
  function deactivateSubmenu(row) {
      var $row = jQuery(row),
          $submenu = $row.children('.nav-sub').children('ul'),
          $subbg = $row.children('.nav-sub').children('div'),
          $subh1 = $row.children('.nav-sub').children('h1');
      $row.find('a').removeClass('hover');
      $submenu.css({
          display: 'none'
      });
      $subbg.css({
          display: 'none'
      });
      $subh1.css({
          display: 'none'
      });
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="nav"&gt;
    &lt;ul class="nav-list"&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;menu1&lt;/a&gt;
         &lt;div class="nav-sub"&gt;
           &lt;div class="nav-sub-bg"&gt;&lt;/div&gt;
             &lt;ul&gt;
                &lt;h1&gt;Blabla&lt;/h1&gt;
                &lt;li&gt;sub1&lt;/h1&gt;
                &lt;li&gt;sub2&lt;/h1&gt;
                ...
             &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;menu2&lt;/a&gt;
         &lt;div class="nav-sub"&gt;
           &lt;div class="nav-sub-bg"&gt;&lt;/div&gt;
             &lt;ul&gt;
                &lt;h1&gt;Blabla&lt;/h1&gt;
                &lt;li&gt;sub1&lt;/h1&gt;
                &lt;li&gt;sub2&lt;/h1&gt;
                ...
             &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.top-menu {
      position: static;
      top: 95px;
      background: #303030;
      padding: 5px;
      color: #fff;
      width: 253px;
      text-align: center;
      cursor: pointer;
  }
  
  .top-menu-dropdown {
      width: 100%;
      height: 448px;
      background: rgb(65, 65, 65);
      position: absolute;
      left: 0px;
      cursor: default;
      z-index: 1;
      display: none;
      margin-top: 5px !important;
  }
  
  .nav {
      width: 1000px;
      margin: 0 auto;
      position: relative;
  }
  
  .nav ul {
      margin: 0;
      padding: 0;
      width: 258px;
      background: #ECECEC;
      padding-left: 6px;
  }
  
  .nav li {
      display: block;
      padding: 0;
      border-bottom: 1px solid #F0F0F0;
      -webkit-box-shadow: -6px 0 0 0 #FF0000;
      box-shadow: -6px 0 0 0 #FF0000;
  }
  
  .nav a {
      display: block;
      padding: 10px 0;
      color: #666;
      text-decoration: none;
      font-size: 18px;
      padding: 12px;
      font-family: proxima_nova_thin;
  }
  
  .nav a.hover, .nav a:hover {
      background: #F7F7F7;
      color: #000;
  }
  
  .nav-list a:after {
      content: '&gt;';
      float: right;
      padding-right: 8px;
      font-size: 14px;
      line-height: 30px;
  }
  
  .nav-sub a:after {
      content: '';
  }
  
  .nav-sub ul {
      background: rgb(247, 247, 247);
      width: 736px;
      display: none;
      position: absolute;
      left: 264px;
      top: 0px;
      -webkit-columns: 3;
      -moz-columns: 3;
      columns: 3;
      -webkit-column-rule: 1px dotted #ddd;
      -moz-column-rule: 1px dotted #ddd;
      column-rule: 1px dotted #ddd;
      -moz-column-fill: balance;
      column-fill: balance;
      padding: 69px 5px 0 5px;
  }
  
  .nav-sub ul li {
      text-align: left;
      -webkit-box-shadow: none;
      box-shadow: none;
      border-bottom: none;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      break-inside: avoid;
  }
  
  .nav-sub ul li a {
      color: #333;
      font-size: 14px;
      display: block;
      padding: 10px;
      font-family: proxima_nova;
      margin-left: 6px;
  }
  
  .nav-sub ul li a:hover {
      background: rgb(255,255,255);
      border-left: 6px solid red;
      margin-left: 0;
  }
  
  .nav-sub h1 {
      text-align: right;
      font-family: proxima_nova_thin;
      border-bottom: 1px solid;
      margin: 20px 20px;
      line-height: 1;
      width: 690px;
      position: absolute;
      top: 0;
      font-size: 24px;
      color: #303030;
  }
  
  .nav-sub-bg {
      background: rgb(247, 247, 247);
      width: 746px;
      height: 424px;
      display: block;
      position: absolute;
      top: 0;
      left: 264px;
      z-index: -1;
  }
  
  /*ul.nav-list li:nth-child(1) ul {display: block}*/
  </code></pre>