title: Drop Down not working under Safari
body: <p>I have developed a drop down menu in CSS, but it doesn't seem to be working in Safari, yet works on every other browser, could anybody see an issue in the code?</p>
  
  <p>It is using simple CSS that shoulden't be causing any issues</p>
  
  <pre><code>#nav {
      position:relative;
      margin:0 auto;
  }
  
  ul#navigation {
  }
  
  ul#navigation li {
      display:inline;
      float:left;
      position:relative;
  }
  
  ul#navigation li a {
  ]}
  
  ul#navigation li a:hover {
  
  }
  
  ul#navigation li:hover &gt; a {
  }
  
  /* Drop-Down Navigation */
  ul#navigation li:hover &gt; ul
  {
      visibility:visible;
      opacity:1;
  }
  
  ul#navigation ul, ul#navigation ul li ul {
      list-style: none;
      margin: 0;
      padding: 0;    
      visibility:hidden;
      position: absolute;
      z-index: 99999;
      width:180px;
      background-image: linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
  background-image: -o-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
  background-image: -moz-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
  background-image: -webkit-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
  background-image: -ms-linear-gradient(bottom, rgb(64,119,149) 28%, rgb(64,119,149) 32%, rgb(83,153,186) 85%);
  
  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.28, rgb(64,119,149)),
      color-stop(0.32, rgb(64,119,149)),
      color-stop(0.85, rgb(83,153,186))
  );
      box-shadow:1px 1px 3px #ccc;
      opacity:0;
      -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
      -moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
      -o-transition:opacity 0.2s linear, visibility 0.2s linear; 
      transition:opacity 0.2s linear, visibility 0.2s linear;     
  }
  
  ul#navigation ul {
      top: 43px;
      left: 1px;
  }
  
  ul#navigation ul li ul {
      top: 0;
      left: 181px;
  }
  
  ul#navigation ul li {
      clear:both;
      width:100%;
      border:0 none;
  }
  
  ul#navigation ul li a {
      background:none;
      padding:7px 15px;
      color:#ffffff;
      text-decoration:none;
      display:inline-block;
      border:0 none;
      float:left;
      clear:both;
      width:150px;
      font-size: 12px;
      font-family: Tahoma;
  }
  
  ul#navigation ul li a:hover {
      background:none;
      padding:7px 15px;
      color:#ffffff;
      text-decoration:none;
      display:inline-block;
      border:0 none;
      float:left;
      clear:both;
      width:150px;
      font-size: 14px;
      font-family: Tahoma;
  }
  
  ul#navigation li a.first {
      border-left: 0 none;
  }
  
  ul#navigation li a.last {
      border-right: 0 none;
  }
  </code></pre>