title: css drop down menu can hover on text only
body: <p>When using my css dropdown menu only the text of the dropdown is active which makes it more difficult to select rather than the area which would be easier (especially with mobile devices).</p>
  
  <p>CSS is:</p>
  
  <pre><code>#topMenu ul {
    text-align: center;
    display: inline;
    margin: 0;
    padding: 15px 20px 17px 20px;
    list-style: none;
  }
  #topMenu ul li {
    font: bold 12px sans-serif;
    text-transform:uppercase;
    color:#666;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 10px 40px;
    background: #EEE;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }
  #topMenu ul li:hover {
    background: #EEE;
    color: #000;
  }
  #topMenu ul li ul {
  z-index: 5000;
    padding: 0;
    position: absolute;
    top: 38px;
    left: 0;
    width: 150px;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
  }
  #topMenu ul li ul li { 
    background: #EEE; 
    display: block; 
    color: #000;
    border:solid 1px #999999;
  }
  #topMenu ul li ul li:hover { background: #EEE; }
  #topMenu ul li:hover ul {
    display: block;
  
    opacity: 1;
    visibility: visible;
  }
  </code></pre>
  
  <p>Code may be a bit cumbersome.</p>
  
  <p>Thanks</p>