title: Remove the unnecessary spacing between elements inside an <ul>
body: <p>Ok, so I have a small menu bar and three of of the elements inside the menu have further submenus. But the elements inside the menu bar have unnecessary spacing between them and also the submenus that I have created have an unnecessary background width which I have colored white in the code to make the reader understand. Because of this unnecessary width the hover effect that is supposed to appear on menu bar appears even if mouse is hovered on the invisible width  which is white in this case but on live code it wont be white. So since it wont be visible in live code visitors might be confused as to why the submenu is still not getting hidden even when they have removed their mouse away from the submenu. So I want to remove the unnecessary spacing between the elements and make their alignment right in the menu bar and also reduce the width of the submenu to width of links inside the submenu. I know this might be a bit difficult to explain so I am posting this fiddle link. <a href="http://jsfiddle.net/W5PsY/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>I cannot post the CSS code because only 30000 characters are allowed to be posted in a question so you can compile the code on your local machine by copying from jsfiddle. Sorry for that extra effort. Html also I am posting only because it is a necessity to post some code.</p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="expertystemsHome2.css" /&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;Expertystems&lt;/title&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="menu"&gt;
              &lt;ul class="menu" id="tempMenu"&gt;
                  &lt;li class="Home"&gt;&lt;a href=""&gt;AAAAAA&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="Repair"&gt;&lt;a  href=""&gt;BBBBBB&lt;/a&gt;  
                          &lt;ul class="submenu"&gt;
                              &lt;li&gt;
                                 &lt;a  href=""&gt;b1&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  href=""&gt;b2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  href=""&gt;b3&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  href=""&gt;b4&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  href=""&gt;b5&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  href=""&gt;b6&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  href=""&gt;b7&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a  href=""&gt;b8&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
  
                  &lt;/li&gt;
  
                  &lt;li class="Unlock"&gt;&lt;a id="tempUnlock" href=""&gt;CCCCCC&lt;/a&gt;
  
                          &lt;ul id="mozillaPain2" class="submenu2"&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;c1&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;c2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;c3&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;c4&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
  
                  &lt;/li&gt;    
                   &lt;li class="Expertise"&gt;&lt;a id="Expertise" href=""&gt;DDDDDD&lt;/a&gt;
  
                          &lt;ul id="mozillaPain3" class="submenu4"&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d1&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d3&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d4&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d5&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d6&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d7&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d8&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d9&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href=""&gt;d10&lt;/a&gt;
                              &lt;/li&gt;
  
                              &lt;li&gt;
                                  &lt;a href=""&gt;&lt;img style="width: 158px;height: auto;" src="images/creation.png"&gt;&lt;/a&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
  
                  &lt;/li&gt;
                  &lt;li class="Careers"&gt;&lt;a  href=""&gt;EEEEEE&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="Contact"&gt;&lt;a  href=""&gt;FFFFFF&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>