title: css position of button in menu
body: <p>I have a menu with menu which looks like this : </p>
  
  <pre><code>&lt;div class="menuContainer"&gt;
  &lt;div id="titlebarDiv" style="float: left;"&gt;
  &lt;a&gt;Item 1&lt;/a&gt;
  &lt;div id="container"&gt;
       &lt;input type="button" value="0" class="masterPageNotifier" style="height: 30px;"onclick="NotifierButtonClicked()" /&gt;
       &lt;input type="hidden" value="" class="mehidden" /&gt;
      &lt;ul class="selectBox" /&gt;
      &lt;/div&gt;
  &lt;a&gt;Item 2&lt;/a&gt;
  &lt;a&gt;Item 3&lt;/a&gt;
  &lt;a&gt;Item 4&lt;/a&gt;
  &lt;a&gt;Item 5&lt;/a&gt;
  &lt;div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>as you can see in between i have a <code>div</code> with a button inside, on click of the button, ul with <code>class="selectbox"</code> will slide down and show the items. Problem here is that i can get menu to work on itself, but as soon as i add button in between, button is moving everything down 1 row, and when i click on the button <code>.menuContainers</code> background gets stretched. i want to make it like facebook when notification button is clicked.i tryed with absolute position on container div, but without luck. </p>
  
  <p><strong>CSS</strong>: </p>
  
  <pre><code>   input[type="submit"],
      input[type="button"],
      button {
          background:#5CCD00;
      background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
      background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
      background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
      background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
      background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
      background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
      padding:10px 15px;
      color:#fff;
      font-family:'Helvetica Neue',sans-serif;
      font-size:13px;
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      border:1px solid #459A00;
      }
  
  .menuContainer
  {
  width: 1000px; 
  margin-left: auto; 
  margin-right: auto; 
  overflow: hidden; 
  background-color: purple;
  }
  
  
  function NotifierButtonClicked() {
      if (checked == false) {
          checked = true;
  
          GetNotificationsForUser();
  
          $('.selectBox').slideToggle(200).css('borderTop', 'none');
          $('.selectBox li').click(function () {
              $('.selectBox').slideUp(200);
          });
  
          //$('.masterPageNotifier').val("0");
      }
      else if (checked == true) {
          checked = false;
          $('.selectBox').slideUp(200);
      }
  
  }
  </code></pre>
  
  <p>Thats how it looks: <img src="https://i.stack.imgur.com/VOBuM.png" alt="enter image description here"></p>