下拉不能在Safari下工作 [英] Drop Down not working under Safari

问题描述

我已经在CSS中开发了一个下拉菜单，但它似乎并不工作在Safari，但工作在其他浏览器，任何人都可以看到代码中的问题。

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?

它使用简单的CSS，不会导致任何问题

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;
}

推荐答案

尝试重置css您还可以执行以下操作： http://meyerweb.com/eric/tools/css/reset/

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

这篇关于下拉不能在Safari下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！