 <p>Here is a solution i found with your markup.</p> <p>Used CSS to beautify it. </p> <p><strong>Jquery:</strong><br> What did you do?<br> when <code>.menu_link</code> is hovered i find what index it has.<br> The index finds if its the first child or second etc.<br> When we have this magic index number <strong><code>var nthNumber</code></strong><br> we can use it to find its corresponding <code>.submenu_panel</code> (I'm guessing here since i cant see all your code) and hide or show this panel </p> <p>Eg. when we hover the <strong>first</strong> <code>.menu_link</code>,<br> we will show the <strong>first</strong> <code>.submenu_panel</code><br> And we do the same for the second and third etc.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".menu_link, .submenu_panel").hover(function() { //Hover inn function var nthNumber = $(this).index() + 1; $("[id$=Submenu]").show(); $("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").show(); }, function() { //Hover out function $("[id$=Submenu]").hide(); var nthNumber = $(this).index() + 1; $("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").hide(); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu [id$=Menu] { border: 2px solid #2980b9; border-radius: 5px; background-color: #3498db; } #menu [id$=Menu] .menu_link { padding: 10px 10px; display: inline-block; font-size: 1.2em; } #menu [id$=Menu] .menu_link:hover { background-color: #45a9ec; //border: 2px solid #2980b9; border-radius: 2px; cursor: pointer; //Visual only (REMOVE)! } #menu [id$=Submenu] { display: none; } #menu [id$=Submenu] .submenu_panel { display: none; background-color: #45a9ec; border: 2px solid #2980b9; border-top: none; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } #menu [id$=Submenu] .submenu_panel .submenu_link { position: relative; display: block; text-indent: 15px; font-size: 1.1em; padding: 4px 0px; border-bottom: 1px solid #2980b9; } #menu [id$=Submenu] .submenu_panel .submenu_link:hover { background-color: #56bafd; cursor: pointer; //ONLY FOR VISUAL(REMOVE)! } #menu [id$=Submenu] .submenu_panel .submenu_link:first-child { border-top: 1px solid #2980b9; margin-top: -5px; padding-top: 5px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;nav id="menu"&gt; &lt;div id="pn1Menu"&gt; &lt;a class="menu_link"&gt;Lorem&lt;/a&gt; &lt;a class="menu_link"&gt;Ipsum&lt;/a&gt; &lt;a class="menu_link"&gt;Dollar&lt;/a&gt; &lt;a class="menu_link"&gt;Si&lt;/a&gt; &lt;a class="menu_link"&gt;Amet&lt;/a&gt; &lt;/div&gt; &lt;div id="pn1Submenu"&gt; &lt;div class="submenu_panel"&gt; &lt;a class="submenu_link"&gt;100&lt;/a&gt; &lt;a class="submenu_link"&gt;200&lt;/a&gt; &lt;a class="submenu_link"&gt;300&lt;/a&gt; &lt;a class="submenu_link"&gt;400&lt;/a&gt; &lt;a class="submenu_link"&gt;500&lt;/a&gt; &lt;a class="submenu_link"&gt;600&lt;/a&gt; &lt;/div&gt; &lt;div class="submenu_panel"&gt; &lt;a class="submenu_link"&gt;010&lt;/a&gt; &lt;a class="submenu_link"&gt;020&lt;/a&gt; &lt;a class="submenu_link"&gt;030&lt;/a&gt; &lt;a class="submenu_link"&gt;040&lt;/a&gt; &lt;a class="submenu_link"&gt;050&lt;/a&gt; &lt;a class="submenu_link"&gt;060&lt;/a&gt; &lt;/div&gt; &lt;div class="submenu_panel"&gt; &lt;a class="submenu_link"&gt;1001&lt;/a&gt; &lt;a class="submenu_link"&gt;2002&lt;/a&gt; &lt;a class="submenu_link"&gt;3003&lt;/a&gt; &lt;a class="submenu_link"&gt;4004&lt;/a&gt; &lt;a class="submenu_link"&gt;5005&lt;/a&gt; &lt;a class="submenu_link"&gt;6006&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/nav&gt;</code></pre> </div> </div> </p>