title: Issue - Menu Hover CSS
body: <pre><code>&lt;div id="menu"&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="about_us.html"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="products.html"&gt;PRODUCTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="services.html"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="enquiry.php"&gt;ENQUIRY&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact_us.html"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#menu {
      width: 960px;
      padding: 0px;
      margin: 5px 0px 5px 0px;
      float: left;
      background-color: #a51c30;
      color: #FFFFFF;
      font-family: "Times New Roman", Times, serif;
      font-size: 16px;
  }
      #menu ul {
          list-style-type: none;
          margin: 0px;
          padding:0px;
  }
  
          #menu ul li {
              margin: 0px 0px 0px 0px;
              width: 130px;
              text-align: center;
              float: left;
              display:block;
          }
  
              #menu ul li a {
                  text-decoration: none;
                  color: #FFFFFF;
                  font-family: "Times New Roman", Times, serif;
                  font-size: 16px;
  
              }
  
  #menu li a:hover {
          background-color:#FFFFFF;
          color:#a51c30;
          border-top:1px solid black;
          border-left:1px solid black;
          border-right:1px solid black;
          padding:10px;
          display:block;
  
  
      }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/5sJ6D/5/" rel="nofollow noreferrer">Fiddle</a></strong></p>
  
  <p>As you can see in the fiddle, on hover the style is not applied to the list item space..! </p>
  
  <p><img src="https://i.stack.imgur.com/nvKYi.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/GEpT1.png" alt="enter image description here"></p>
  
  <p>I want the hover style to be applied like below</p>
  
  <p><img src="https://i.stack.imgur.com/cCPwo.png" alt="enter image description here"></p>
  
  <p>But in that there is no space at the sides and also it as a problem on hover the text appears white and the text is not visible, <a href="http://jsfiddle.net/5sJ6D/14/" rel="nofollow noreferrer">the fiddle of this part</a></p>
  
  <p>What part should i edit? </p>