title: div text moving slightly upward even when ul child display set to none
body: <p>I'm a bit new to CSS so forgive me for any shortcomings on my side but I can't seem to find the solution for this problem anywhere else. I'm sure it is very trivial as I haven't changed too much to the code before it went wrong.</p>
  <p>So I have made this website's navbar which has 8 different div on it and they are equally spaced with each other. I want to have a drop down when mouse hovers on some of them. Anyway, before I created a list(or comment it) as a child of this div the <code>ABOUT US</code> seems to be in position as I meant it to be. Vertically centered and aligned with other div 's content.</p>
  <p>Here's my website look before adding the list child to the div: <img src="https://i.stack.imgur.com/HLYPC.png" alt="BEFORE" />
  Here's after it: <img src="https://i.stack.imgur.com/DTzBK.png" alt="AFTER" /></p>
  <p>As you can see, the <code>ABOUT US</code> has moved above a little.</p>
  <p>Here's my JSFiddle: <a href="http://jsfiddle.net/v85o0ppp/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p>(I advise you to view the JSFiddle page at a 50% Zoom level to get a perspective of every div.)</p>
  <p>Please provide a solution as to how I can prevent this from happening and also, if you'd like to help me additionally then tell me how to get a drop down on hover.</p>