title: Dropdown CSS issue - hidden list shows up when hovered over
body: <p>my problem is that when I hover over the area where the hidden list is, it shows the hidden list. I only want it to show the hidden list when hovered over the 'Language' link on the dropdown menu. Why is it doing this, it's probably something blindingly obvious that I can't spot.</p>
  
  <p>Cheers :)</p>
  
  <p>EDIT: I've already tried using a fixed height for the #lang_bar. I also need the transitions to still work. I've already tried using the display:none and display:block; but that didn't work so I used visibility instead.</p>
  
  <p>Any ideas?</p>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;div id="lang_bar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;strong&gt;Language&lt;/strong&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href ="#"&gt;&lt;strong&gt;Maori&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href ="#"&gt;&lt;strong&gt;Tongan&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href ="#"&gt;&lt;strong&gt;Chinese&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href ="#"&gt;&lt;strong&gt;Japanese&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href ="#"&gt;&lt;strong&gt;Korean&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#lang_bar {
  
      font-family: 'Open Sans', sans-serif;
      color: white;
      padding-left: 152px;
      text-transform: uppercase;
      z-index: 40;
      position: absolute;
      padding-top: 2px;
      top: 0;
  
  }
  
  
  #lang_bar ul ul li a {
  
      padding-top: 3px;
      padding-left:5px;
  
  }
  
  
  #lang_bar ul li ul li a:before {
  
      content: '';
      display:block;
      right: 0px;
      height: 2px;
      bottom:117px;
      width: 100px;
      position: absolute;
      background: rgba(255, 255, 255, 0.2);
  
  }
  
  #lang_bar ul li ul li a:after {
      content: '';
      display:block;
      right: 1px;
      height: 2px;
      width: 100px;
      position: absolute;
      background: rgba(255, 255, 255, 0.6);
  
  }
  
  #lang_bar li, #lang_bar li ul {
  
  
      text-decoration: none;
      list-style-type: none;
  
  }
  
  #lang_bar ul {
  
      list-style: none;
      padding-left: 0px;
  
  }
  
  #lang_bar ul li {
  
      float: left;
      width: 100px;
      text-align: left;
      line-height: 21px;
  
  }
  
  #lang_bar ul li a {
  
      display: block;
          color: #FFF;
          background: transparent;
          text-decoration: none;
          text-align: center;
  
  }
  
  #lang_bar ul li ul {
  
          visibility: hidden;
          font-size:12px;
          opacity: 0;
  
  }
  
  #lang_bar ul li:hover ul {
  
          opacity: 1;
  
          visibility: visible; /* display the dropdown */
          -webkit-transition: all .25s ease;
          -moz-transition: all .25s ease;
          -ms-transition: all .25s ease;
          -o-transition: all .25s ease;
          transition: all .25s ease;
  
  }
  
  #lang_bar ul li ul a:hover{
          transition-duration: 0.6s;
          background-color: rgba(255, 0, 0, 0.23);
  
      }
  </code></pre>