title: css sub menu acting up in wordpress
body: <p>i have manually added a menu to my wordpress header.php theme file
  everything looks great when i use single ul but if i use the sub-menu feature of WP and add move items under a single menu link, a weird result turns out which you can see here.
  <img src="https://i.stack.imgur.com/xhB15.png" alt="result"></p>
  
  <p>The result i am looking for is adding a :hover effect which will only then show the sub-menu items, but first thing the items should get in line, under the right li item (Jobs -> Job Seekers &amp; Job Offers) </p>
  
  <p>Why do i get the unexpected 521px sub-menu width and how do i solve my predicament</p>
  
  <pre><code>&lt;li id="menu-item-103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-103"&gt;&lt;a href="http://ldpolishing.com/_dev/jobs/job-offers/"&gt;Jobs&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
      &lt;li id="menu-item-101" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-101"&gt;&lt;a href="http://ldpolishing.com/_dev/jobs/job-seekers/"&gt;Job Seekers&lt;/a&gt;&lt;/li&gt;
      &lt;li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102"&gt;&lt;a href="http://ldpolishing.com/_dev/jobs/job-offers/"&gt;Job Offers&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><a href="http://ldpolishing.com/_dev/" rel="nofollow noreferrer">Link to the page</a>
  Thank you</p>