title: Hover effect moving text
body: <p>For some reason the hover effects on my website seem to move the text when they're highlighted.</p>
  
  <p>Here are the examples:</p>
  
  <p><a href="http://gyazo.com/165d4f93909770c14387e574420a3db8" rel="nofollow">http://gyazo.com/165d4f93909770c14387e574420a3db8</a></p>
  
  <p>I was wondering if anyone could help me make it so the text remains still when highlighted with the hover effect.</p>
  
  <p>Here is the CSS for the Nav bar:</p>
  
  <pre><code>    /*TOP NAV BAR SECTION*/
  #nav_bar {
      background-color: #a22b2f;
      padding:1px;
      box-shadow: 0px 2px 10px;
      height:45px;
      }         
  #nav_bar ul li {
      display: inline-block;
  }
  #nav_bar ul li a {
      color: white;
      text-decoration:none;
      font-weight:bold;
      font-size:15px;
  }
  #nav_bar ul li ul {
      display: none;
  }
  #nav_bar&gt;ul&gt;li&gt;a:hover {
      background:#8c1b1f;
      padding-bottom:13px;
      padding-top:17px;
      padding-left:10px;
      padding-right:10px;   
  }
  #nav_bar&gt;ul&gt;li&gt;ul&gt;li&gt;a:hover {
      background:#c9c9c9;
      padding-bottom:5px;
      padding-top:5px;
      padding-left:5px;
      padding-right:5px;
  
  }
  #nav_bar ul li:hover ul {
      display: block;
      position: absolute;
      padding: 0px;
      background: #e2e2e2;
      padding-top:10px;
      padding-bottom:10px;
      padding-left:0px;
      padding-right:10px;
      border: 1px solid black;
      border-radius:5px;
      }#nav_bar ul li:hover ul li {
      display: block;`enter code here`
  }
  #nav_bar ul li:hover ul li a {
      color: black;
      font-size:14px;
      font-weight:normal;
      margin-left:-15px;
  </code></pre>
  
  <p>And the HTML for the Nav bar:</p>
  
  <pre><code>&lt;!--TOP NAV BAR SECTION--&gt;
              &lt;div id="nav_bar"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="status.html"&gt;STATUS&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="info.html"&gt;INFO&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;GAMEMODES&lt;/a&gt;
  
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="survival.html"&gt;SURVIVAL&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;br&gt;&lt;a href="pure-pvp.html"&gt;PURE-PVP&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;br&gt;&lt;a href="gamesworld.html"&gt;GAMESWORLD&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="rules.html"&gt;RULES&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="vote.html"&gt;VOTE&lt;/a&gt;
  
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>