Question

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?

It is using simple CSS that shoulden’t be causing any issues

#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 > a {
}

/* Drop-Down Navigation */
ul#navigation li:hover > 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;
}

Answer 1

Try to reset the css before you do anything else: http://meyerweb.com/eric/tools/css/reset/