title: How to remove transparency from my CSS3 menu
body: <p>I have the following Css setting for my menu:-</p>
  
  <pre><code>.wrap {
      width: 100%;
      margin-bottom: 1%;
  
  }
  
  nav {
      background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
      background-image: linear-gradient(#fff, #ccc);
      border-radius: 6px;
      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
      padding: 0 10px;
      position: relative;
  }
  
  .menu li {
      float: left;
      position: relative;
      list-style-type: none;
       /*background: url('img/denim.png');
      font-family: 'Droid Sans', sans-serif;*/
  }
  
  .menu li a {
      color: #444;
      display: block;
      font-size: 14px;
      line-height: 20px;
      padding: 6px 12px;
      margin: 8px 8px;
      vertical-align: middle;
      text-decoration: none;
  }
  
  .menu li a:hover {
      background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
      background-image: linear-gradient(#ededed, #fff);
      border-radius: 12px;
      box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
      color: #222;
  }
  
  /* Dropdown styles */
  
  .menu ul {
      position: absolute;
      left: -9999px;
      list-style: none;
      opacity: 0;
      transition: opacity 1s ease;
  }
  
  .menu ul li {
      float: none;
  }
  
  .menu ul a {
      white-space: nowrap;
  }
  
  /* Displays the dropdown on hover and moves back into position */
  .menu li:hover ul {
      background: rgba(255,255,255,0.7);
      border-radius: 0 0 6px 6px;
      box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
      left: 5px;
      opacity: 1;
  }
  
  /* Persistant Hover State */
  .menu li:hover a {
      background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
      background-image: linear-gradient(#ccc, #ededed);
      border-radius: 12px;
      box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
      color: #222;
  }
  
  .menu li:hover ul a {
      background: none;
      border-radius: 0;
      box-shadow: none;
  }
  
  .menu li:hover ul li a:hover {
      background: -webkit-gradient(linear, center top, center bottom, from(#eee), to(#fff));
      background-image: linear-gradient(#ededed, #fff);
      border-radius: 12px;
      box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
  }
  
  
  
  
  @font-face {
    font-family: 'IconicStroke';
      src: url("~/fonts/iconic/iconic_stroke.eot");
      src: local('IconicStroke'),
         url("~/fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
         url("~/fonts/iconic/iconic_stroke.otf") format('opentype');
  </code></pre>
  
  <p>but i am facing a problem is that for the menu items the background is transparent, so the menu items will not be clear as the text behind them will be shown. so how i can remove the menu item transparency ? </p>