title: MENU DISPLAY PROBLEMS
body: <p>So I have a menu from ul and li, and it looks something like this at page load:
  <img src="https://i.stack.imgur.com/sOaoc.jpg" alt="enter image description here"></p>
  
  <p>but when i click each menu and executed the code this happens:</p>
  
  <p><img src="https://i.stack.imgur.com/nnpHp.jpg" alt="enter image description here"></p>
  
  <p>what should i do? here's my CSS:</p>
  
  <pre><code>#menu-centered {
      padding: 0px;
      margin-bottom: 0px;
  }
  #menu-centered ul {
      margin: 0;
      padding: 0;
      height: 99px;
      width: 603px;
  }
  #menu-centered li {
      display: inline;
      list-style: none;
      padding: 0px;
      background: url(images/menu1.png) no-repeat right top;
  }
  #menu-centered a {
      border-style: none;
      border-color: inherit;
      border-width: medium;
      display: block;
      margin-right: 0;
      padding: 20px 30px 0px 30px;
      text-decoration: none;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      font-weight: normal;
      color: #FFFFFF;
      height: 68px;
      width: 130px;
      text-align: center;
  }
  #menu-centered a:hover {
      background: url(images/menu2.png) no-repeat right top;
  }
  </code></pre>
  
  <p>and here's my html code for the menus:</p>
  
  <pre><code>&lt;div id="menu-centered"&gt;
  &lt;ul&gt;
  &lt;li&gt; &lt;a href="javascript:Clikbtn1()" &gt;MENU1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="javascript:Clikbtn2()"&gt;MENU2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="javascript:Clikbtn3()"&gt;MENU3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help. Thanks</p>