title: Css textbox interferes with css menu
body: <p>My html/css code interferes with my <strong>HTML/CSS</strong> drop down menu</p>
  
  <p>I have one textbox positioned above my navigation bar but the css code inter fears with my css dropdown.</p>
  
  <p><b><a href="http://jsfiddle.net/K6fey/1/" rel="nofollow">JSFIDDLE </a></b></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;title&gt;Mingamez.com&lt;/title&gt;
  &lt;link rel="shortcut icon" href="images/favicon.png"&gt; 
  &lt;link rel="stylesheet" type="text/css" href="css/main.css"/&gt;
  &lt;/head&gt;
  &lt;div id='cssmenu'&gt;
  &lt;ul&gt;
  &lt;li class='active'&gt;&lt;a href='index.html'&gt;&lt;span&gt;&lt;img style="height: 35px;width:75;" src="images/logo_image.png" alt="website logo"/&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;&lt;img src="images/menu_image.png" alt="Menu"/&gt;  &lt;/span&gt;&lt;/a&gt;
    &lt;ul&gt;
       &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Product 1&lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
             &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
       &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Product 2&lt;/span&gt;&lt;/a&gt;
          &lt;ul&gt;
             &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Item&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;form method="get" action="search" id="advsearch"&gt;
  &lt;input name="q" type="text" size="40" placeholder="Search..." /&gt;
   &lt;/form&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/** Body */
  body{
  background-color:#9FBAC4;
  }
  /** Advanced css menu */
  #cssmenu ul { margin: 0; padding: 0; z-index:-1;}
  #cssmenu li { margin: 0; padding: 0; z-index:-1;}
  #cssmenu a { margin: 0; padding: 0; z-index:-1;}
  #cssmenu ul {list-style: none; z-index:-1;}
  #cssmenu a {text-decoration: none; z-index:-1;}
  #cssmenu { height: 62px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}
  #cssmenu { position: fixed; left: 0; top: 0; width: 100%; z-index:-1;}
  #cssmenu &gt; ul &gt; li {
     float: left;
     margin-right: 35px;
     margin-left: 35px;
     position: relative;
    }
  #cssmenu &gt; ul &gt; li &gt; a {
     color: rgb(160,160,160);
     font-family: Verdana, 'Lucida Grande';
     font-size: 15px;
     line-height: 70px;
     padding: 15px 20px;
  -webkit-transition: color .15s;
    -moz-transition: color .15s;
      -o-transition: color .15s;
         transition: color .15s;
  }
   #cssmenu &gt; ul &gt; li &gt; a:hover {color: rgb(250,250,250); }
   #cssmenu &gt; ul &gt; li &gt; ul {
     opacity: 0;
     visibility: hidden;
     padding: 16px 0 20px 0;
     background-color: rgb(250,250,250);
     text-align: left;
     position: absolute;
     top: 55px;
     left: 50%;
     margin-left: -90px;
     width: 180px;
  -webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
      -o-transition: all .3s .1s;
          transition: all .3s .1s;
  -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
         border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
         box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   }
  
   #cssmenu &gt; ul &gt; li:hover &gt; ul {
     opacity: 1;
     top: 68px;
     visibility: visible;
   }
   #cssmenu &gt; ul &gt; li &gt; ul:before{
     content: '';
     display: block;
     border-color: transparent transparent rgb(250,250,250) transparent;
     border-style: solid;
     border-width: 10px;
     position: absolute;
     top: -20px;
     left: 50%;
      margin-left: -10px;
  }
  #cssmenu &gt; ul ul &gt; li { position: relative;}
  #cssmenu ul ul a{
     color: rgb(50,50,50);
     font-family: Verdana, 'Lucida Grande';
     font-size: 13px;
     background-color: rgb(250,250,250);
     padding: 5px 8px 7px 16px;
     display: block;
   -webkit-transition: background-color .1s;
    -moz-transition: background-color .1s;
      -o-transition: background-color .1s;
         transition: background-color .1s;
  }
   #cssmenu ul ul a:hover {background-color: rgb(240,240,240);}
   #cssmenu ul ul ul {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top: -14px;
     right: 206px;
     padding: 16px 0 20px 0;
     background-color: rgb(250,250,250);
     text-align: left;
     width: 160px;
  -webkit-transition: all .83s;
    -moz-transition: all .83s;
      -o-transition: all .83s;
         transition: all .83s;
  -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
      border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
         box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  }
  #cssmenu ul ul &gt; li:hover &gt; ul { opacity: 1; left: -170px; visibility: visible;}
  #cssmenu ul ul a:hover{
     background-color: rgb(0,133,143);
     color: rgb(240,240,240);
  }
  /** Advanced Css Search Box */
  #advsearch {
  text-align: center;
  margin-top: 0px;
  }
  #advsearch input[type="text"] {
  background: url(images/search-dark.png) no-repeat 10px 6px #fcfcfc;
  border: 1px solid #d1d1d1;
  font: bold 12px Arial,Helvetica,Sans-serif;
  color: #bebebe;
  width: 150px;
  padding: 6px 15px 6px 35px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
  -webkit-transition: all 0.7s ease 0s;
  -moz-transition: all 0.7s ease 0s;
  -o-transition: all 0.7s ease 0s;
  transition: all 0.7s ease 0s;
  }
  #advsearch input[type="text"]:focus {
  width: 200px;
  }
  </code></pre>