need to show child hover menu as horizontal from it's main parent container
<p>I want to show child hover menu as horizontal from it's main parent container like this site <a href="http://www.batiosec.ma/" rel="nofollow">http://www.batiosec.ma/</a></p>

<ol>
<li>"Menu 3" width will be same as left &amp; right li.</li>
<li>show child hover menu as horizontal from it's main parent container.</li>
</ol>

<p>My code is below :<br>
HTML</p>

<pre><code>&lt;div class="container"&gt;
&lt;div class="row"&gt;
    &lt;nav class="navbar navbar-right"&gt;
         &lt;ul&gt;
             &lt;li&gt;&lt;a href=""&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                         &lt;li class="dropdown"&gt;&lt;a href=""&gt;Menu 3&lt;/a&gt;
                                 &lt;ul&gt;
                                     &lt;div class="dropmenu"&gt;
                                         &lt;li&gt;&lt;a href=""&gt;Level 1&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href=""&gt;Level 1&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href=""&gt;Level 1&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href=""&gt;Level 1&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href=""&gt;Level 1&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href=""&gt;Level 1&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href=""&gt;Level 1&lt;/a&gt;&lt;/li&gt;
                                     &lt;/div&gt;
                                 &lt;/ul&gt;
                         &lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href=""&gt;Menu 5&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
     &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<p>
CSS:<br></p>

<pre><code>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
}
ul li {
    text-align: center;
    display: inline-block;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #113333;
    font-size: 14px;
    font-family: sans-serif;
    padding: 10px 40px;
    text-align: center;
}
ul li a:hover {
    background-color: #4d4d4d;
    color: #fff;
    text-decoration: none;
}
    ul li ul {
    display: none;
}
</code></pre>

<p>JQUERY:<br></p>

<pre><code>jQuery(document).ready(function ($) {

  $("ul li.dropdown").hover(
    function () {
        $("ul li ul").show(100);
    },
    function () {
        $("ul li ul").hide(100);
    }
  );

});
</code></pre>