title: How to make the border shorter and the search form line up on one line?
body: <p>I am working on this site: <a href="http://www.problemio.com" rel="nofollow">http://www.problemio.com</a> and on the blue navigation bar, on the right side of it, my search form does not line up horizontally. Is there a way to make it do that?</p>
  
  <p>My current html is like this:</p>
  
  <pre><code>    &lt;div class="menusystem" id="site_nav"&gt;
          &lt;ul class="main_menu_ul"&gt; &lt;!-- The entire nav thing --&gt;
  
              &lt;li class="main_menu_li"&gt; 
                              &lt;form  name="form" method="post"&gt;
                      Search 
                      &lt;input type="text" size="20"&gt; 
                      &lt;input type="submit"  value="Search"&gt;&lt;/input&gt;   
                     &lt;/form&gt;
              &lt;/li&gt;           
  
              &lt;li class="main_menu_li"&gt;&lt;a href="http://www.problemio.com/"&gt;Support&lt;/a&gt;
              &lt;/li&gt;
  
  
              &lt;li class="main_menu_li_left"&gt;&lt;a href="http://www.problemio.com/"&gt;Problems&lt;/a&gt; 
                  &lt;ul class="child_menu_ul"&gt;
                      &lt;li class="first"&gt;&lt;a href="http://www.problemio.com/"&gt;Categories&lt;/a&gt;&lt;/li&gt;
  
                      &lt;li class="last"&gt;&lt;a href="http://www.problemio.com/"&gt;Hello 5&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my css for the menu items:</p>
  
  <pre><code>.menusystem 
  {
      position: absolute;
      font-size: 1em;
      color: white;
  }
  
  .menusystem ul, .menusystem li 
  {
      margin: 0;
      padding: 0;
  }
  .menusystem li 
  {
      list-style: none outside none;
  }
  
  .menusystem ul 
  {
      list-style: none;
  /*
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
  */
  
  }
  
  .menusystem ul li 
  {
      position: relative;
  /*
      -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
      -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
  */
  
  
  }
  
  .menusystem ul li ul 
  {
      display: none;
      position: absolute;
      top: 1.6em;
      right: 0;
      width: 10em;    
  
  }
  
  .menusystem li a {
      display: block;
      padding: 5px 10px;
       /* dark blue */
  /*  border: 1px solid #2e6ea4; */
      text-decoration: none;
  }
  
  .menusystem ul li.main_menu_li 
  {
      float:right;
      width: 10em;
      margin-right:0.2em;
      text-align: center;
      border-left: solid 1px white;   
      border-left: solid 1px white;   
  }
  
  .menusystem ul li.main_menu_li_left
  {
      float:right;
      width: 10em;
      margin-right:0.2em;
      text-align: center;
  }
  
  /* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/
  * html ul li { float: left; }
  * html ul li a { height: 1%; }
  
  
  .menusystem li:hover ul, .menusystem li.mouseHover ul { 
      display: block;
  }
  
  .menusystem li ul.child_menu_ul li a
  {
      /*
      color: #fff;
      */
      color: #fff;
      /* light blue */
  /*  background: #7ba9c9;  */
  
          font-size: 80%;
      text-shadow: none;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      border-bottom: 1px solid #2e6ea4;
      border-top: 0px;
      background: none repeat scroll 0 0 #2E6EA4;
  }
  .menusystem li ul.child_menu_ul li.first a
  {
      -moz-border-radius-topleft: 14px;
      -moz-border-radius-topright: 14px;
      -webkit-border-top-left-radius: 14px;
      -webkit-border-top-right-radius: 14px;
      -moz-border-radius-bottomleft: 0;
      -moz-border-radius-bottomright: 0;
      -webkit-border-bottom-left-radius: 0;
      -webkit-border-bottom-right-radius: 0;
      border-top: 1px solid #2e6ea4;
  }
  
  .menusystem li ul.child_menu_ul li.last a
  {
      -moz-border-radius-topleft: 0px;
      -moz-border-radius-topright: 0px;
      -webkit-border-top-left-radius: 0px;
      -webkit-border-top-right-radius: 0px;
          -moz-border-radius-bottomleft: 14px;
      -moz-border-radius-bottomright: 14px;
      -webkit-border-bottom-left-radius: 14px;
      -webkit-border-bottom-right-radius: 14px;
  }
  
  .menusystem li ul.child_menu_ul li.only a 
  {
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
  
  }
  
  .menusystem li ul.child_menu_ul li a:hover {
      color: #ff0;
      background: #2e6ea4; 
  }
  
  /*.menusystem li.main_menu_li a */
  .menusystem ul.child_menu_ul a
  {
      color: #fff;
  /*
      background: -moz-linear-gradient(100% 100% 90deg, #668eb8, #2e6ea4 );
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#668eb8), to(#2e6ea4));
  */
  
      text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
      /*
      -moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
      -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
  */
  }
  
  .menusystem li.main_menu_li a:hover 
  {
  /*      background-color: #2e6ea4; */
      color: #ff0;
  }
  
  ul li.spaced
  {   
      padding-bottom: 10px; 
      font-weight: normal;    
  }
  </code></pre>
  
  <p>How can I line up the search area horizontally?  And also, is there a way to make the white borders between the navigation items shorter?</p>