title: CSS the second level of drop down menu appears even without hovering the first level
body: <p>I have a problem with my drop down menu. 
  it works ok, except one detail. When the mouse hovering  the place where the second level of drop down menu suppose to appear it becomes visible even if I don't hover the first level.</p>
  
  <p>This makes all the content which is located under the drop down menu inaccessible because when I wan to click buttons or text boxes which are located under it the second level drop down menu appears.</p>
  
  <p>what is the reason I really can't figure out</p>
  
  <p>This is the css style for the drop menu:</p>
  
  <pre><code>.menu li {
  margin:0px;
  list-style:none;
  font-family:'arial';
  }
  
  .menu a {
  transition:all linear 0.15s;
  color:white;
  font-weight: bold;
  text-decoration:none;
  }
  
  
  
   .menu &gt; ul &gt; li {
  float:left;
  display:inline-block;
  position:relative;
  font-size:14px;
  }
  
  .menu &gt; ul &gt; li &gt; a {
  padding:6px 15px;
  display:inline-block;
  transition:opacity linear 0.15s;
  box-shadow:0px 2px 3px rgba(0,0,0,0.2);
  text-shadow:0px 1px 0px rgba(0,0,0,0.4);
  }
  
  .menu &gt; ul &gt; li:hover &gt; a, .menu &gt; ul &gt; .current-item &gt; a {
  background:#8a96c0;
  }
  
  .menu li:hover .subMenue {
  z-index:2;
  opacity:1;
  }
  
   /*----- Second  Level -----*/
   .subMenue {
  width:100%;
  padding:5px 0px;
  position:absolute;
  top:100%;
  left:0px;
  z-index:2;
  opacity:0;
  transition:opacity linear 0.15s;
  box-shadow:0px 2px 3px rgba(0,0,0,0.2);
  font-weight:normal;
  background:#0e62b8;
  }
  
  .subMenue li:hover .subMenue2
  {
  z-index:2;
  opacity:1;
  }
  
  
   .subMenue li {
  display:block;
  font-size:14px;
  
  }
  
  .subMenue li a {
  padding:3px 15px;
  display:block;
  
   }
  
  .subMenue li a:hover, .subMenue .current-item a {
  background:#8a96c0;
  }
  </code></pre>
  
  <p>and this is the list:</p>
  
  <pre><code>&lt;ul class="myMenue"&gt;
  &lt;li&gt;&lt;a href="main.php" title="Main Page"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="Unit Management"&gt;&lt;span&gt;&amp;nbsp;PRODUCT MANAGEMENT&amp;nbsp;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="subMenue"&gt;
         &lt;li&gt;&lt;a href="addItem.php" title="Add"&gt;Add&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;&lt;a href="delitem.php" title="Delete"&gt;Delete&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="edititem.php" title="Edit"&gt;Edit&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;&lt;span&gt; &amp;nbsp;  REPORTS&amp;nbsp;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="subMenue"&gt;
         &lt;li&gt;&lt;a href="time.php" &gt;Time reports&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="directions.php" &gt;Area repotrs&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="stories.php" &gt;PLANNING &amp;nbsp;&lt;/a&gt;
       &lt;ul class="subMenue"&gt;
          &lt;li&gt;&lt;a href="#" &gt; Add Set&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" &gt; Edit Set&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" &gt; Delete Set&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
  
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>