title: how to open a menu with a button?in html
body: <p>My question is how can i open my menu when im clicking on my button? and i want my menu to be on top
  but i dont realy know how to fix it.</p>
  
  <p>The point is that i want a nice functioning website for my presentation.
  santino bonora,</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>     &lt;html&gt;
          &lt;head&gt;
              &lt;link rel="stylesheet" href="css/base.css" /&gt;
              &lt;link rel="stylesheet" href="css/..." /&gt;
          &lt;/head&gt;
          &lt;title&gt;
              a test
          &lt;/title&gt;
          &lt;body&gt;
              &lt;button id="menubar"&gt;
                  Menu
              &lt;/button&gt;
              &lt;ul id="menu"&gt;
                  &lt;ul&gt;1&lt;/ul&gt;
                  &lt;ul&gt;2&lt;/ul&gt;
                  &lt;ul&gt;3&lt;/ul&gt;
              &lt;/ul&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> #menubar {
      background: none repeat scroll 0 0 rgb(70, 100, 200);
      border: 0 none;
      font-family: consolas;
      font-size: 34px;
      height: 70px;
      opacity: 1;
      transition: width 0.5s ease 0s, opacity 2s ease 0.5s;
      width: 100px;
  }
  #menubar:focus {
      font-family: consolas;
      font-size: 34px;
      opacity: 0.65;
      text-align: left;
      width: 1350px;
      z-index: -10;
  }
  #menu:hover {
      z-index: +5;
      opacity: 1.0;
  }
  #menu {
      display: block;
      float: left;
      height: 70px;
      margin: -70px 0px 0px 100px;
      padding: 0px 0px 0px 0px;
      width: 1248px;
      border: 0px solid black;
      z-index: -1;
      background: rgb(70,100,200);
      opacity: 0.0;
      transition: 2s ease 0s;
  }
  ul {
      float: left;
      text-align: center;
      width: 4%;
  }
  </code></pre>